О спецификации CSS2

1 О спецификации CSS2

Содержание

  • 1.1 Как читать эту спецификацию
  • 1.2 Как организована эта спецификация
  • 1.3 Соглашения
    • 1.3.1 Язык документа: элементы и атрибуты
    • 1.3.2 Определения свойств CSS
      • Значение
      • Начальное
      • Применяется к
      • Наследуется
      • Процентные значения
      • Группы носителей
    • 1.3.3 Сокращённые свойства
    • 1.3.4 Замечания и примеры
    • 1.3.5 Изображения и полные описания
  • 1.4 Благодарности
  • 1.5 Авторские права

1.1 Как читать эту спецификацию

Данная спецификация написана в расчёте на читателей двух типов: CSS-авторов и CSS-разработчиков. Мы надеемся, что эта спецификация снабдит авторов средствами, необходимыми для создания эффективных, привлекательных и доступных документов без излишнего углубления в детали реализации CSS. Разработчики к тому же смогут найти всё необходимое для создания соответствующих пользовательских агентов (ПА).
Спецификация начинается общим представлением CSS и постепенно всё более углубляется в технические подробности и специфику. Для быстрого доступа к информации служат общие и специализированные оглавления в начале каждого раздела и индексы - в электронном и печатном виде.

Спецификация создана в расчёте на два типа представления: электронное и печатное. Хотя эти два типа, без сомнения, похожи, читатели могут заметить и некоторые отличия. Например, ссылки не будут работать в печатной версии (естественно), а номера страниц будут отсутствовать в электронной версии. В случае возникновения противоречий, электронная версия должна считаться определяющей.

1.2 Как организована эта спецификация

Эта спецификация содержит следующие разделы:

Раздел 2: Введение в CSS2
Введение содержит краткий учебник по CSS2 и обсуждение принципов дизайна вне CSS2.

Раздел 3 - 20: Справочник-учебник CSS2
Основу составляет справочник языка CSS2. Этот справочник определяет, что может входить в таблицы стилей CSS2 (синтаксис, свойства, значения свойств) и как ПА обязаны интерпретировать эти таблицы стилей, чтобы претендовать на соответствие.

Приложения:
Содержат образцы таблиц стилей для HTML 4.0, изменения относительно CSS1, замечания по реализации и выполнению, грамматике CSS2, список нормативных и информативных ссылок и три индекса: Свойства, Дескрипторы и Общий индекс.

1.3 Соглашения

1.3.1 Язык документа: элементы и атрибуты

  • В CSS имена свойств, дескрипторов и псевдоклассов ограничиваются одиночными кавычками.
  • Значения в CSS ограничиваются одиночными кавычками.
  • Элементы языка документа записываются буквами в верхнем регистре.
  • Имена атрибутов языка документа записываются в нижнем регистре и ограничиваются двойными кавычками.

1.3.2 Определения свойств CSS

Каждое определение свойства CSS начинается общей ключевой информацией:

'property-name'
Значение:действительные значения & синтаксис
Начальное:начальное значение
Применяется: к соответствующим элементам
Наследуется: если свойство наследуется
Процентное:интерпретация процентных значений
Носитель:к каким группам носителей применяется свойство

Значение/Value

Определяет набор действительных значений свойства. Типы значений могут обозначаться по-разному:

  1. ключевые слова (например, auto, disc и т.д.);
  2. базовые типы данных, вводимые между символами "<" и ">" (например, <length>, <percentage> и т.д.). В электронной версии документа каждый объект базового типа данных связан со своим определением;
  3. типы, имеющие те же диапазоны значений, что и свойство, имеющее то же имя (например, <'border-width'>, <'background-attachment'> и т.д.). В данном случае имя типа является именем свойства (заключённым в кавычки) между символами "<" и ">" (например, <'border-width'>). В электронной версии документа каждый объект такого типа не-терминала ссылается на соответствующее определение свойства;
  4. не-терминалы, не использующие имя свойства. В данном случае имя не-терминала выводится между символами "<" и ">", например, <border-width>. Заметьте разницу между <border-width> и <'border-width'>; последнее определено в терминах предыдущего. Определение не-терминала размещается поблизости от его первого вхождения в данной спецификации. В электронной версии документа каждый объект этого типа ссылается на соответствующее определение значения.

Другие слова в этих определениях являются ключевыми словами, которые обязаны появляться буквально, без кавычек (например, red). Слэш (/) и запятая (,) также обязаны появляться буквально.

Значения должны быть организованы так:

  • Несколько соседних слов означают, что все они должны появляться в указанном порядке.
  • Вертикальная линия (|) разделяет две или более альтернативы: только одна из них должна быть записана.
  • Двойная вертикальная черта (||) разделяет две или более опции: одна или более из них должны быть записаны в любом порядке.
  • Скобки ([ ]) служат для группирования.

Соседство является более строгим, чем двойная вертикальная черта, а двойная вертикальная черта - строже, чем одинарная. Таким образом, следующие строки эквивалентны:

    a b   |   c || d e
  [ a b ] | [ c || [ d e ]]

За каждым типом, ключевым словом или группой в скобках может следовать один из модификаторов:

  • Звёздочка (*) - означает, что предыдущий тип, слово или группа появляется ноль или более раз.
  • Плюс (+) - означает, что предыдущий тип, слово или группа появляется один или более раз.
  • Знак вопроса (?) - означает, что предыдущий тип, слово или группа являются необязательными.
  • Пара чисел в фигурных скобках ({A,B}) - означает, что предыдущий тип, слово или группа появляется не менее А и не более В раз.

Следующий пример иллюстрирует различные значения типов:

Value\Значение: N | NW | NE
Value: [ <length> | thick | thin ]{1,4}
Value: [<family-name> , ]* <family-name>
Value: <uri>? <color> [ / <color> ]?
Value: <uri> || <color>

Начальное/Initial

Специфицирует начальное значение свойства. Если свойство наследуется, это значение, данное корневому элементу дерева документа. См. в разделе Каскад информацию о взаимодействии между значениями - начальными, унаследованными и специфицированными в таблице стилей.

Применяется к/ Applies to

Перечисляет элементы, к которым применяется данное свойство. Предполагается, что все элементы имеют все свойства, но некоторые свойства не имеют действия на представление элементов определённых типов. Например, 'white-space' действует только на элементы уровня блока (block-level elements).

Наследуется/Inherited

Обозначает, может ли свойство наследоваться от элемента-предка. См. в разделе Каскад информацию о взаимодействии между значениями - начальными, унаследованными и специфицированными в таблице стилей.

Процентные значения/Percentage values

Указывает, как должны интерпретироваться процентные значения, если они появляются в значении свойства. Если появляется "N/A", это значит, что свойство не принимает процентных значений.

Группы носителей/Media groups

Обозначает группы носителей, к которым свойство применяется. Условия соответствия определяют, что ПА обязаны поддерживать это свойство, если они поддерживают представление в типах носителя, включённых в эти группы носителей.

1.3.3 Сокращённые формы свойств

Некоторые свойства являются сокращёнными свойствами, что означает, что они позволяют авторам специфицировать значения нескольких свойств в одном свойстве.

Например, свойство 'font' является сокращением для одновременной установки 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' и 'font-family'.

Если в сокращённом свойстве значения опущены (отсутствуют), каждое "отсутствующее" свойство устанавливается в своё начальное значение (см. раздел Каскад).

Пример(ы):

Несколько правил стиля в этом примере:

H1 {
  font-weight: bold;
  font-size: 12pt;
  line-height: 14pt;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal;
  font-stretch: normal;
  font-size-adjust: none
}

можно записать с помощью одного сокращённого свойства:

H1 { font: bold 12pt/14pt Helvetica }

В этом примере 'font-variant', 'font-stretch', 'font-size-adjust' и 'font-style' получают свои начальные значения.

1.3.4 Замечания и примеры

Все примеры, иллюстрирующие неправильное использование, явно помечены - "НЕПРАВИЛЬНОЕ ИСПОЛЬЗОВАНИЕ".

Все примеры HTML соответствуют Строгому Определению Типа Документа HTML 4.0/Strict DTD, (определённом в [HTML40]), если иное не указано в объявлении типа документа.

Все примечания являются исключительно информативными.

Примеры и примечания промаркированы в коде HTML, чтобы ПА данной и CSS1 спецификаций представляли их особым образом.

1.3.5 Изображения и полные описания

Большинство изображений в электронной версии данной спецификации сопровождаются "полными описаниями" того, что изображено. Ссылка на полное описание обозначена "[D]" справа от изображения.

Изображения и полные описания являются исключительно информативными.

1.4 Благодарности

Данная спецификация является продуктом работы W3C Working Group над Cascading Style Sheets (Каскадными Таблицами Стилей) и Formatting Properties (Свойствами Форматирования).

Помимо редакторов данной спецификации, членами Working Group являются:
Brad Chase (Bitstream),
Chris Wilson (Microsoft),
Daniel Glazman (Electricité de France),
Dave Raggett (W3C/HP),
Ed Tecot (Microsoft),
Jared Sorensen (Novell),
Lauren Wood (SoftQuad),
Laurie Anna Kaplan (Microsoft),
Mike Wexler (Adobe),
Murray Maloney (Grif),
Powell Smith (IBM),
Robert Stevahn (HP),
Steve Byrne (JavaSoft),
Steven Pemberton (CWI),
Thom Phillabaum (Netscape),
Douglas Rand (Silicon Graphics),
Robert Pernett (Lotus),
Dwayne Dicks (SoftQuad) и
Sho Kuwamoto (Macromedia).

Мы благодарим их всех.

Свой вклад внесли приглашённые эксперты Working Group:
George Kersher, Glenn Rippel (Bitstream),
Jeff Veen (HotWired), Markku T. Hakkinen (The Productivity Works),
Martin Dürst (W3C, до этого - Universität Zürich),
Roy Platon (RAL),
Todd Fahrner (Verso),
Tim Boland (NIST),
Eric Meyer (Case Western Reserve University) и
Vincent Quint (W3C).

Раздел Web Fonts разрабатывали Brad Chase (Bitstream),
David Meltzer (Microsoft Typography) и
Steve Zilles (Adobe).

Следующие сотрудники в разной степени участвовали в разработке разделов, относящихся в шрифтам: Alex Beamon (Apple), Ashok Saxena (Adobe), Ben Bauermeister (HP), Dave Raggett (W3C/HP), David Opstad (Apple), David Goldsmith (Apple), Ed Tecot (Microsoft), Erik van Blokland (LettError), François Yergeau (Alis), Gavin Nicol (Inso), Herbert van Zijl (Elsevier), Liam Quin, Misha Wolf (Reuters), Paul Haeberli (SGI) и, наконец, Phil Karlton (Netscape).

Раздел Paged Media (Страничные Носители) в значительной части авторизовали Robert Stevahn (HP) и Stephen Waters (Microsoft).

Robert Stevahn (HP), Scott Furman (Netscape) и Scott Isaacs (Microsoft) являлись ключевыми сотрудниками при разработке CSS Positioning (Позиционирование CSS).

Mike Wexler (Adobe) был редактором рабочих проектов, описавшим многие из новых возможностей CSS2.

T.V. Raman (Adobe) сделал основные разработки, относящиеся к Aural Cascading Style Sheets (ACSS)/Звуковым Таблицам Стилей/ и к концепции звукового представления, на базе своей работы в AsTeR (Audio System For Technical Readings). Он участвовал в разработке начального проекта спецификации ACSS, которая содержится в данной спецификации. Значения звуковых свойств для примера таблицы стилей HTML 4.0 разработаны им же; в настоящее время он использует всё это в каждодневной работе над своим audio desktop, в соединении с Emacspeak и браузером Emacs W3 (авторизованными William'ом Perry, разработавшим также звуковые расширения, ожидаемые W3).

Todd Fahrner (Verso) исследовал современные и предшествующие браузеры для разработки образцов таблиц стилей в Приложении.

Благодарим Jan Kärrman, автора html2ps, за большую помощь, оказанную при создании PostScript версии спецификации.

Преодолевая электронные и физические проблемы, следующие люди сотрудничали в разработке CSS2:
Alan Borning, Robert Cailliau, Liz Castro, James Clark, Dan Connolly, Donna Converse, Daniel Dardailler, Al Gilman, Daniel Greene, Scott Isaacs, Geir Ivarsøy, Vincent Mallet, Kim Marriott, Brian Michalowski, Lou Montulli, Henrik Frystyk Nielsen, Jacob Nielsen, Eva von Pepel, William Perry, David Siegel, Peter Stuckey и Jason White.

Дискуссия на www-style@w3.org обсуждала многие ключевые вопросы CSS. Особо мы хотели бы поблагодарить участников:
Bjorn Backlund, Todd Fahrner, Lars Marius Garshol, Sue Jordan, Ian Hickson, Susan Lesch, Andrew Marshall, MegaZone, Eric Meyer, Russell O'Connor, David Perrell, Liam Quinn, Jon Seymour, Neil St. Laurent, Taylor, Brian Wilson и Chris Wilson.

Особая благодарность Web Accessibility Initiative Protocols и Formats Technical Review Working Group (WAI PF) за помощь в повышении доступности CSS2.

Благодарим Philippe Le Hégaret, чей проверщик CSS помогал выверить корректность примеров и правописания.

Особая благодарность Arnaud Le Hors, чья инженерная работа сделала этот документ рабочим.

Adam Costello улучшил эту спецификацию, выполнив детальную ревизию.

Наконец, благодарим Tim Berners-Lee, без которого всё это вообще было бы невозможно.

1.5 Авторские права

Copyright © 1997 World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). Все Права Зарезервированы.

Документы на сайте W3C предоставляются для копирования на основе следующей лицензии.
Получая, используя и/или копируя этот документ или документ W3C, на который в данном документе имеется ссылка, Вы согласны с тем, что Вы прочитали, поняли и согласны со следующими положениями и условиями:

Разрешение на использование, копирование и распространение содержания этого документа или документа W3C, на который в данном документе имеется ссылка, на любых носителях для любых целей и без оплаты или арендной платы даётся с условием, что Вы включите нижеследующую информацию во ВСЕ копии документа или его части, которые Вы используете:

  1. Ссылка URI на оригинальный документ W3C.
  2. Уведомление о предшествующих авторских правах оригинального автора, если они отсутствуют, в форме: "Copyright © World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). Все Права Зарезервированы."
  3. Если они указаны, СТАТУС документа W3C.

Если место позволяет, необходимо включать полный текст этого УВЕДОМЛЕНИЯ.
Дополнительно должны быть приписаны заверения для владельцев авторских прав на любое программное обеспечение, документы или другие объекты или продукты, которые Вы создали в соответствии с выполнением содержимого данного документа или любой его части.

Вы не имеете права, в соответствии с данной лицензией, создавать модификации или выдержки.

ЭТОТ ДОКУМЕНТ ДАЁТСЯ "AS IS\КАК ЕСТЬ" И ВЛАДЕЛЬЦЫ АВТОРСКИХ ПРАВ НЕ ДАЮТ НИКАКИХ УКАЗАНИЙ ИЛИ ГАРАНТИЙ, ЯВНЫХ ИЛИ КОСВЕННЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯ, ГАРАНТИИ РЕАЛИЗУЕМОСТИ, ПРИГОДНОСТИ ДЛЯ КОНКРЕТНЫХ ЦЕЛЕЙ, НЕНАРУШЕНИЕ ЗАКОНА ИЛИ ИМЕНОВАНИЕ, - ЧТО СОДЕРЖИМОЕ ДАННОГО ДОКУМЕНТА ПОДХОДИТ ДЛЯ ЛЮБЫХ ЦЕЛЕЙ, НИ ЧТО ВЫПОЛНЕНИЕ ТАКОГО СОДЕРЖИМОГО НЕ ВЫЗОВЕТ НАРУШЕНИЯ ПАТЕНТОВ КАКОЙ-ЛИБО ТРЕТЬЕЙ СТОРОНЫ, АВТОРСКИХ ПРАВ, ТОРГОВЫХ МАРОК И ДРУГИХ ПРАВ.

ВЛАДЕЛЬЦЫ АВТОРСКИХ ПРАВ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ЗА ЛЮБОЙ ПРЯМОЙ, КОСВЕННЫЙ, СПЕЦИАЛЬНЫЙ ИЛИ ВОЗМОЖНЫЙ ВРЕД, НАНЕСЁННЫЙ ИЗ-ЗА КАКОГО-ЛИБО ИСПОЛЬЗОВАНИЯ ДАННОГО ДОКУМЕНТА ИЛИ ВЫПОЛНЕНИЯ ИЛИ РЕАЛИЗАЦИИ ЕГО СОДЕРЖИМОГО.

Имена и торговые марки владельцев авторских прав НЕ могут использоваться для публичных целей и рекламы данного документа или его содержимого без специального письменного разрешения. Наименование авторских прав в данном документе всегда остаётся за их владельцами.


Полное описание анонимного бокса блока

Эта диаграмма иллюстрирует, как анонимные боксы блока могут возникать вокруг анонимного содержимого.

Она показывает боксы, содержащие текст, первый из которых - анонимный. Он имеет светло-серый фон и содержит слова "Some text". Сразу под ним находится бокс P с тёмно-серым фоном, содержащий слова "More text". Оба бокса находятся внутри бокса DIV.

Вернуться к изображению.


Звуковые таблицы стилей

19 Звуковые таблицы стилей

Содержание

  • 19.1 Введение
  • 19.2 Свойства силы (объёма) звука: 'volume'
  • 19.3 Свойства разговора: 'speak'
  • 19.4 Свойства паузы: 'pause-before', 'pause-after' и 'pause'
  • 19.5 Свойства реплики: 'cue-before', 'cue-after' и 'cue'
  • 19.6 Свойства микширования: 'play-during'
  • 19.7 Пространственные свойства: 'azimuth' и 'elevation'
  • 19.8 Свойства характеристик голоса: 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress' и 'richness'
  • 19.9 Свойства речи: 'speak-punctuation' и 'speak-numeral'

19.1 Введение

Звуковое представление документа, обычно используемое людьми с проблемами зрения, сочетает речевой синтез и "звуковые иконки". Часто такое звуковое представление происходит при конвертации документа в обычный текст и его перенаправлении в устройство чтения с экрана -- программу или физическое устройство, которое просто считывает все символы на экране. Результатом этого является менее эффективное представление, чем могло бы быть, если бы сохранялась структура документа. Свойства таблиц стилей для звукового представления могут использоваться совместно с визуальными свойствами (смешанный носитель) или как звуковая альтернатива визуальному представлению.

Помимо очевидного преимущества - повышения доступности, есть и улучшение использования в других условиях прослушивания информации: использовании в автомобиле, индустриальных и медицинских системах документации (intranet), домашние развлечения и помощь пользователям, обучающимся чтению или имеющим проблемы с чтением.

При использовании звуковых свойств, канва состоит из трёхмерного физического пространства (звуковой среды) и временнóго пространства (можно специфицировать звуки до, во время и после других звуков). Свойства CSS позволяют также авторам изменять качество синтезируемой речи (тип голоса, частоту, инфлексию и т.п.).

Пример(ы):

H1, H2, H3, H4, H5, H6 {
    voice-family: paul;
    stress: 20;
    richness: 90;
    cue-before: url("ping.au")
}
P.heidi { azimuth: center-left }
P.peter { azimuth: right }
P.goat  { volume: x-soft }

Здесь речевой синтезатор направляется в речевые заголовки в голосе (своего рода "аудио-шрифт"), называемом "paul", ровным звуком, но очень мягким голосом. Перед произнесением заголовков звуковой отрывок будет проигрываться из заданного URL. Параграфы класса "heidi" будут идти слева (если звуковая система способна воспроизводить пространственное аудио), а параграфы класса "peter" - справа. Параграфы класса "goat" будут звучать очень мягко.

19.2 Свойства объёма звука: 'volume'

'volume'
Значение:<number> | <percentage> | silent | x-soft | soft | medium | loud | x-loud | inherit
Начальное:medium
Применяется: ко всем элементам
Наследуется:да
Процентное:относительно наследуемого значения
Носитель:звуковой

Объём означает величину размаха синусоиды. Другими словами, сильно изогнутая синусоида голоса при объёме 50 может давать пики выше данного значения. Полные значения, вероятно, будут более комфортными для человека, например, при физическом управлении объёмом звука (что будет пропорционально увеличивать значения и 0, и 100); единственное, что делает данное свойство, это определяет динамический диапазон.

Значения имеют следующий смысл:

<number>
Любое число от '0' до '100'. '0' - это минимальный слышимый уровень громкости, а 100 соответствует максимальному комфортному уровню.
<percentage>
Процентные значения вычисляются относительно наследуемого значения и затем выравниваются в диапазоне от '0' до '100'.
silent
Вообще нет звука. Значение '0' не означает то же самое, что 'silent'.
x-soft
То же, что '0'.
soft
То же, что '25'.
medium
То же, что '50'.
loud
То же, что '75'.
x-loud
То же, что '100'.

ПА должны позволять слушателю устанавливать значения, соответствующие '0' и '100'. Ни одно значение не является универсально применимым; подходящие значения зависят от используемой аппаратуры (громкоговорителей, наушников), обстановки (автомобиль, домашний театр, библиотека) и личных предпочтений.
Вот некоторые примеры:

  • Браузер для использования в автомобиле имеет установки с учётом сильных посторонних шумов. '0' будет довольно высоким уровнем, а '100' - очень высоким. Речь будет хорошо прослушиваться сквозь уличный шум, но общий динамический диапазон будет ограничен. Автомобили с улучшенной звукоизоляцией могут обеспечить более широкий динамический диапазон.
  • Другой браузер используется в квартире поздно ночью или в учебной аудитории. '0' - установлено на очень низкий уровень, а '100' - тоже на довольно низкий. Как и в первом примере, динамический диапазон довольно ограничен. Реальный объём звука здесь небольшой, а в первом примере - слишком высокий.
  • В тихом изолированном помещении установлен домашний театр hi-fi. '0' - установлен довольно низко и '100' - довольно высоко; динамический диапазон весьма широк.

Одна и та же авторская таблица стилей может использоваться во всех случаях, просто отображая значения '0' и '100' соответствующим образом на стороне клиента.

19.3 Свойства разговора: 'speak'

'speak'
Значение:normal | none | spell-out | inherit
Начальное:normal
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:визуальный

Это свойство специфицирует, будет ли текст представляться в звуке и - если да - в какой манере (примерно как свойство 'display').
Возможные значения:

none
Вырезает звуковое представление, так что элемент не требует времени для представления. Обратите внимание, что потомки могут переопределять это значение и будут звучать. (Для того, чтобы точно отменить представление элемента и его потомков, используйте свойство 'display').
normal
Использует зависимые от языка правила произношения для представления элемента и его потомков.
spell-out
Текст произносится побуквенно (используется для акронимов и аббревиатур).

Заметьте разницу между элементом, чьё свойство 'volume' имеет значение 'silent', и элементом, чьё свойство 'speak' установлено в 'none'. Первый отнимает столько же времени, как если бы он произносился, включая паузы до и после элемента, но звук не будет генерироваться. Второй не отнимает времени и не представляется (хотя его потомки - могут).

19.4 Свойства паузы: 'pause-before', 'pause-after' и 'pause'

'pause-before'
Значение:<time> | <percentage> | inherit
Начальное:зависит от ПА
Применяется: ко всем элементам
Наследуется:нет
Процентное:см. текст
Носитель:звуковой
'pause-after'
Значение:<time> | <percentage> | inherit
Начальное:зависит от ПА
Применяется: ко всем элементам
Наследуется:нет
Процентное:см. текст
Носитель:звуковой

Это свойство специфицирует паузу до (или после) произнесения содержимого элемента.
Значения имеют следующий смысл:

<time>
Выражает паузу в абсолютных единицах времени (секундах и миллисекундах).
<percentage>
Относится к инверсии значения свойства 'speech-rate'. Например, если speech-rate - 120 слов в минуту (т.е. одно слово в полсекунды, или 500ms), тогда 'pause-before' в 100% означает паузу в 500ms, а 'pause-before' в 20% означает 100ms.

Пауза вставляется между содержимым элементов и любым содержимым 'cue-before' или 'cue-after'.

Авторы должны использовать относительные значения, чтобы создавать более надёжные таблицы стилей с учётом возможной разницы в реальных значениях устанавливаемого объёма.

'pause'
Значение:[ [<time> | <percentage>]{1,2} ] | inherit
Начальное:зависит от ПА
Применяется: ко всем элементам
Наследуется:нет
Процентное:см. описания 'pause-before' и 'pause-after'
Носитель:звуковой

Свойство 'pause' это сокращение для 'pause-before' и 'pause-after'. Если заданы два значения, то первое является 'pause-before', а второе - 'pause-after'. Если задано только одно значение, оно применяется для обоих свойств.

Пример(ы):

H1 { pause: 20ms } /* pause-before: 20ms; pause-after: 20ms */
H2 { pause: 30ms 40ms } /* pause-before: 30ms; pause-after: 40ms */
H3 { pause-after: 10ms } /* pause-before: ?; pause-after: 10ms */

19.5 Свойства реплики: 'cue-before', 'cue-after' и 'cue'

'cue-before'
Значение:<uri> | none | inherit
Начальное:none
Применяется: ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:звуковой
'cue-after'
Значение:<uri> | none | inherit
Начальное:none
Применяется: ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:звуковой

Звуковые иконки (реплики) являются способом различения семантических элементов. Звуки могут проигрываться до и/или после элемента, чтобы обозначить его границы.
Значения имеют следующий смысл:

<uri>
URI обязан указывать на ресурс звуковой иконки. Если URI указывает не на аудио-файл, а, например, на изображение, ресурс должен игнорироваться, а свойство - рассматриваться так, как если бы оно имело значение 'none'.
none
Звуковая иконка не специфицирована.

Пример(ы):

A {cue-before: url("bell.aiff"); cue-after: url("dong.wav") }
H1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
'cue'
Значение:[ <'cue-before'> || <'cue-after'> ] | inherit
Начальное:не определено для сокращённого свойства
Применяется: ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:звуковой

Свойство 'cue' является сокращением для установок 'cue-before' и 'cue-after'. Если заданы два значения, первое является 'cue-before' , а второе - 'cue-after'. Если задано только одно значение, оно применяется к обоим свойствам.

Пример(ы):

Следующие два правила эквивалентны:

H1 {cue-before: url("pop.au"); cue-after: url("pop.au") }
H1 {cue: url("pop.au") }

Если ПА не может вывести звуковую иконку (напр., установки ПА не позволяют это сделать), мы рекомендуем, чтобы он воспроизводил альтернативную подсказку (напр., выводил предупреждающее сообщение, издавал предупреждающий звук и т.п.).

Информацию о других видах техники генерации содержимого см. в псевдоэлементах :before и :after.

19.6 Свойства микширования: 'play-during'

'play-during'
Значение:<uri> mix? repeat? | auto | none | inherit
Начальное:auto
Применяется: ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:звуковой

Сходное со свойствами 'cue-before' и 'cue-after', данное свойство специфицирует звук, проигрываемое как фон в то время, когда проговаривается содержимое элемента.
Значения имеют следующий смысл:

<uri>
Звук, обозначенный этим <uri>, проигрывается как фон в то время, когда проговаривается содержимое элемента.
mix
Данное ключевое слово, если установлено, означает, что звук, наследуемый из свойства 'play-during' родительского элемента, продолжает проигрываться, а звучание, указанное в <uri>, смешивается с ним. Если 'mix' не специфицировано, фоновое звучание элемента замещает звучание из родительского элемента.
repeat
Данное ключевое слово, если установлено, означает, что звук будет повторяться, если окажется слишком короток для заполнения всей длительности элемента. В ином случае звучание проигрывается однократно и останавливается. Это подобно действию свойства 'background-repeat'. Если звучание слишком долгое для элемента, оно обрывается сразу, как только элемент произнесён.
auto
Звучание родительского элемента продолжает проигрываться (без рестарта, что могло бы иметь место, если бы свойство наследовалось).
none
Это ключевое слово обозначает тишину. Звучание родительского элемента не слышно (если имеется) в течение данного элемента и продолжается после данного элемента.

Пример(ы):

BLOCKQUOTE.sad { play-during: url("violins.aiff") }
BLOCKQUOTE Q   { play-during: url("harp.wav") mix }
SPAN.quiet     { play-during: none }

19.7 Пространственные свойства: 'azimuth' и 'elevation'

Пространственное аудио является важным стилистическим свойством звукового представления. Оно предоставляет естественный способ реализации звучания нескольких независимых голосов, как в реальной жизни (источники звука редко находятся в одной точке помещения). Стереодинамики создают пространственный эффект. Стереонаушники или становящиеся всё более популярными установки с пятью колонками в домашнем театре могут генерировать объёмное звучание, а многополосные установки могут производит трёхмерное звучание. VRML 2.0 также включает пространственное аудио в предположении, что доступные по цене для потребителей аудиоустройства с пространственными эффектами со временем станут широко распространёнными.

'azimuth'
Значение:<angle> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit
Начальное:center
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:звуковой

Значения имеют следующий смысл:

<angle>
Позиция в угловых терминах от '-360deg' до '360deg'. Значение '0deg' означает впереди и в центре звукового пространства. '90deg' это справа, '180deg' - сзади, '270deg' (или более подходящий эквивалент, '-90deg') - слева.
left-side
То же, что '270deg'. С 'behind' - '270deg'.
far-left
То же, что '300deg'. С 'behind' - '240deg'.
left
То же, что '320deg'. С 'behind' - '220deg'.
center-left
То же, что '340deg'. С 'behind' - '200deg'.
center
То же, что '0deg'. С 'behind' - '180deg'.
center-right
То же, что '20deg'. С 'behind' - '160deg'.
right
То же, что '40deg'. С 'behind' - '140deg'.
far-right
То же, что '60deg'. С 'behind' - '120deg'.
right-side
То же, что '90deg'. С 'behind' - '90deg'.
leftwards
Сдвигает звучание влево относительно текущего угла. Точнее, вычитает 20 градусов. Арифметически выполняется modulo 360 градусов. Заметьте, что 'leftwards' точнее описать как "повёрнуто против часовой стрелки," поскольку оно всегда вычитает 20 градусов, даже если наследуемый azimuth уже позади слушателя (в этом случае звучание на самом деле перемещено вправо).
rightwards
Сдвигает звучание вправо относительно текущего угла. Точнее, прибавляет 20 градусов. См. 'leftwards' в арифметике.

Данное свойство может быть более точно реализовано микшированием одного сигнала в разных каналах с разным уровнем. Оно может также использовать фазовое смещение, цифровую задержку и другие аналогичные приёмы для того, чтобы создать иллюзию сцены. Точные значения, используемые для выполнения этого эффекта, и количество динамиков зависят от ПА; это свойство лишь идентифицирует желаемый результат.

Пример(ы):

H1   { azimuth: 30deg }
TD.a { azimuth: far-right }          /*  60deg */
#12  { azimuth: behind far-right }   /* 120deg */
P.comment { azimuth: behind }        /* 180deg */

Если пространственный азимут специфицирован и выводящее устройство не способно производить звук позади слушателя, ПА должны конвертировать значения задней полусферы в значения передней полусферы. Метод может быть такой:

  • если 90deg < x <= 180deg, тогда x := 180deg - x
  • если 180deg < x <= 270deg, тогда x := 540deg - x
'elevation'
Значение:<angle> | below | level | above | higher | lower | inherit
Начальное:level
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:звуковой

Значения имеют следующий смысл:

<angle>
Специфицирует возвышение как угол между '-90deg' и '90deg'. '0deg' означает передний горизонт, что означает уровень слушателя. '90deg' означает прямо сверху, а '-90deg' - прямо внизу.
below
То же, что '-90deg'.
level
То же, что '0deg'.
above
То же, что '90deg'.
higher
Прибавляет 10 градусов к текущему возвышению.
lower
Вычитает 10 градусов из текущего возвышения.

Точные значения, используемые для получения этого эффекта, и количество динамиков не определены. Это свойство лишь идентифицирует желаемый результат.

Пример(ы):

H1   { elevation: above }
TR.a { elevation: 60deg }
TR.b { elevation: 30deg }
TR.c { elevation: level }

19.8 Свойства характеристик голоса: 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress' и 'richness'

'speech-rate'
Значение:<number> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit
Начальное:medium
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:звуковой

Специфицирует темп речи. Обратите внимание, что допустимы и абсолютные, и относительные значения ключевых слов (сравните с 'font-size').
Значения имеют следующий смысл:

<number>
Специфицирует темп речи - слов в минуту, количество которых варьируется в зависимости от языка и широко поддерживается речевыми синтезаторами.
x-slow
То же, что 80 слов в минуту.
slow
То же, что 120 слов в минуту
medium
То же, что 180 - 200 слов в минуту.
fast
То же, что 300 слов в минуту.
x-fast
То же, что 500 слов в минуту.
faster
Прибавляет 40 слов в минуту к текущему темпу.
slower
Вычитает 40 слов в минуту из текущего темпа.
'voice-family'
Значение:[[<specific-voice> | <generic-voice> ],]* [<specific-voice> | <generic-voice> ] | inherit
Начальное:зависит от ПА
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:звуковой

Значением является приоритетный список разделённых запятыми имён семейств голосов (сравните с 'font-family').
Значения имеют следующий смысл:

<generic-voice>
Значениями являются семейства голосов. Возможные значения: 'male', 'female' и 'child'.
<specific-voice>
Значения являются специфическими объектами (напр., comedian, trinoids, carlos, lani).

Пример(ы):

H1 { voice-family: announcer, male }
P.part.romeo  { voice-family: romeo, male }
P.part.juliet { voice-family: juliet, female }

Имена могут быть в кавычках и обязаны быть закавычены, если какое-либо слово в имени не соответствует правилам синтаксиса для идентификаторов. Рекомендуется также закавычивать голоса с именем, состоящим из более чем одного слова. Если кавычки отсутствуют, любые символы пробела до и после имени голоса игнорируются и любая последовательность пробельных символов внутри имени голоса конвертируется в одиночный символ пробела.

'pitch'
Значение:<frequency> | x-low | low | medium | high | x-high | inherit
Начальное:medium
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:звуковой

Специфицирует среднюю высоту (частоту) говорящего голоса. Средняя высота голоса зависит от семейства голосов. Например, средняя высота стандартного мужского голоса - около 120Hz, а женского - около 210Hz.

Значения имеют следующий смысл:

<frequency>
Специфицирует среднюю высоту голоса (Hz).
x-low, low, medium, high, x-high
Эти значения не отображаются в абсолютные значения частоты, поскольку зависят от семейства голосов. ПА должны отображать эти значения в соответствующие частоты, базируясь на семействе голосов и установках ПА. В то же время, ПА обязаны отображать эти значения упорядоченно (т.е. 'x-low' ниже, чем 'low', и т.д.).
'pitch-range'
Значение:<number> | inherit
Начальное:50
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:звуковой

Специфицирует вариации средней высоты. Воспринимаемая высота человеческого голоса определяется фундаментальной частотой и обычно имеет значения: 120Hz для мужского и 210Hz для женского голоса. На человеческих языках говорят с различной инфлексией и частотой; эти вариации выражают дополнительные значения и смысл. Так, оживлённая речь, т.е. с сильной инфлексией, имеет высокий диапазон. Это свойство специфицирует диапазон, вне которого появляется вариация, т.е., как сильно фундаментальная частота может отклоняться от средней частоты.

Значения имеют следующий смысл:

<number>
Значение - между '0' и '100'. '0' производит плоский монотонный голос. 50 даёт нормальную инфлексию. Выше 50 - оживлённая речь.
'stress'
Значение:<number> | inherit
Начальное:50
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:звуковой

Специфицирует "локальные пики" интонационного контура голоса. Например, английский является акцентированным языком, и различные части предложения имеют первичное, вторичное и третичное выделение. Значение свойства 'stress' управляет величиной инфлексии, которая является результатом действия этих маркёров выделения. Это свойство действует вместе с 'pitch-range' и служит для того, чтобы разработчики могли использовать высококачественные воспроизводящие устройства.

Значения имеют следующий смысл:

<number>
Значения - от '0' до '100'. Смысл значения зависит от языка. Например, уровень '50' - для стандартного мужского голоса, говорящего по-английски (средняя частота = 122Hz) с нормальной интонацией и выделением будет отличаться от голоса со значением '50', говорящего по-итальянски.
'richness'
Значение:<number> | inherit
Начальное:50
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:звуковой

Специфицирует полётность голоса. Полётный голос будет слышен в большом помещении, а вкрадчивый - нет. (Термин "вкрадчивый" относится к форме синусоиды.)

Значения имеют следующий смысл:

<number>
Значения - от '0' до '100'. Чем выше значение, тем более полётный голос. Более низкие значения дают мягкий, медоточивый голос.

19.9 Свойства речи: 'speak-punctuation' и 'speak-numeral'

Дополнительное свойство речи, speak-header, описано в главе о таблицах.

'speak-punctuation'
Значение:code | none | inherit
Начальное:none
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:звуковой

Специфицирует, как произносится пунктуация.
Значения имеют следующий смысл:

code
Такие знаки препинания, как точка с запятой, скобки и так далее, произносятся буквально.
none
Знаки не произносятся, а представляются естественно, как различные паузы.
'speak-numeral'
Значение:digits | continuous | inherit
Начальное:continuous
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:звуковой

Управляет произношением чисел. Значения имеют следующий смысл:

digits
Произносит числа отдельными цифрами. Например, "237" произносится "два три семь".
continuous
Числа произносятся полностью. Например, "237" произносится "двести тридцать семь". Словесное представление зависит от языка.


Полное описание первого примера форматирования Bach/XML

Эта диаграмма иллюстрирует пример представления документа XML.

Отображаются пять линий текста, все одного стиля:

Fredrick the Great meets Bach
Johann Nikolaus Forkel
One evening, just as he was getting his flute ready and his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.


Полное описание второго примера форматирования Bach/XML

Эта диаграмма иллюстрирует второй пример форматирования документа XML.

Пять строк текста отображаются одним цветом. Однако первая является заголовком и форматирована более крупным шрифтом. Вторая - это имя автора и выделена курсивом. оставшаяся часть параграфа не имеет определённого стиля:

Fredrick the Great meets Bach
Johann Nikolaus Forkel
One evening, just as he was getting his flute ready and his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.


Полное описание моделей фона

Эта диаграмма иллюстрирует, как рисунок фона может повторяться в содержимом и незаполненных областях бокса.

В этом примере рисунок фона сначала центрируется в боксе (установлен в элементе BODY). Бокс содержит параграфы текста, выделенные серым цветом.

Изображение, голубая волнистая линия на палево-жёлтом фоне, повторяется затем вертикально до верха и низа бокса BODY. Создаётся волнистая область вниз по центру страницы.


Модель бокса

8 Модель бокса

Содержание

  • 8.1 Размеры бокса
  • 8.2 Пример полей, заполнения и рамок
  • 8.3 Свойства поля: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin'
    • 8.3.1 Сжатие полей
  • 8.4 Свойства заполнения: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' и 'padding'
  • 8.5 Свойства рамки
    • 8.5.1 Ширина рамки: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' и 'border-width'
    • 8.5.2 Цвет рамки: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' и 'border-color'
    • 8.5.3 Стиль рамки: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' и 'border-style'
    • 8.5.4 Сокращённые свойства рамок: 'border-top', 'border-bottom', 'border-right', 'border-left' и 'border'

Модель бокса CSS описывает прямоугольный бокс, который генерируется для элементов дерева документа и располагается в соответствии с моделью визуального форматирования. Страничный бокс это особый вид бокса, детально описанный в разделе страничный носитель.

8.1 Размеры бокса

Каждый бокс имеет область содержимого (например, текст, изображение и т.п.) и необязательное окружение - области заполнения, рамки и поля; размер каждой области специфицируется свойствами, определёнными ниже. На диаграмме показано соотношение этих областей и терминология, используемая для ссылок на разные участки поля/margin, рамки/border и заполнения/padding:

Image illustrating the relationship between content, padding, borders, and margins. [D]

Поле, рамка и заполнение могут быть разорваны в левом, правом, верхнем или нижнем сегментах (например, на диаграмме, "LM" в левом поле, "RP" в правом заполнении, "TB" в верху рамки и т.д.).

Периметр каждой из четырёх областей (содержимого, заполнения, рамки и поля) называется "край", соответственно - каждый бокс имеет четыре края:

content edge/край содержимого или inner edge/внутренний край
Край содержимого окружает отображаемое содержимое.
padding edge/край заполнения
Окружает заполнение бокса. Если заполнение имеет ширину 0, край заполнения - это то же, что и край содержимого. Край заполнения бокса определяет края содержащего блока, установленного боксом.
border edge/край рамки
Окружает рамку бокса. Если рамка имеет ширину 0, то край рамки - это то же, что и край заполнения.
margin edge/край поля или outer edge/внешний край
Окружает поле бокса. Если поле имеет ширину 0, то край поля - тот же, что и край рамки.

Каждый край может быть разорван слева, справа, вверху и внизу.

Размеры области содержимого бокса - ширина содержимого и высота содержимого - зависят от нескольких факторов: имеет ли элемент, генерирующий бокс, установленные свойства 'width' или 'height', содержит ли бокс текст или другие боксы, является ли бокс таблицей и т.д. Ширина и высота бокса обсуждаются в главе некоторые детали модели визуального форматирования.

Ширина бокса выводится как сумма левого и правого поля, рамки, заполнения и ширины содержимого. Высота выводится как сумма верхнего и нижнего поля, рамки, заполнения и высоты содержимого.

Стиль фона различных областей бокса определяется так:

  • Область содержимого: свойство 'background' генерирующего элемента.
  • Область заполнения: свойство 'background' генерирующего элемента.
  • Область рамки: свойства рамки генерирующего элемента.
  • Область поля: поля всегда прозрачны.

8.2 Пример полей, заполнения и рамок

Этот пример документа HTML показывает, как поля, рамки и заполнение взаимодействуют:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Пример полей, заполнения и рамок</TITLE>
    <STYLE type="text/css">
      UL {
        background: green;
        margin: 12px 12px 12px 12px;
        padding: 3px 3px 3px 3px;
                                     /* Рамки не установлены */
      }
      LI {
        color: black;                /* цвет текста - чёрный */
        background: gray;            /* Содержимое, заполнение будет серым */
        margin: 12px 12px 12px 12px;
        padding: 12px 0px 12px 12px; /* Заметьте, что заполнение справа 0px */
        list-style: none             /* перед элементом списка нет никаких глифов */
                                     /* Рамки не установлены */
      }
      LI.withborder {
        border-style: dashed;
        border-width: medium;        /* устанавливает ширину рамок всех сторон */
        border-color: black;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>Первый элемент списка
      <LI class="withborder">Второй элемент списка длиннее,
                             чтобы показать перенос.
    </UL>
  </BODY>
</HTML>

и даёт дерево документа с (помимо других соотношений) элементом UL, в котором есть два дочерних LI.

Первая диаграмма иллюстрирует, что этот пример даст в результате.
Вторая иллюстрирует взаимоотношения между полями, рамками и заполнением элементов UL и LI.

Image illustrating how parent and child margins, borders, and padding relate. [D]

Обратите внимание, что:

  • Ширина содержимого каждого бокса LI вычисляется сверху вниз; содержащий блок для каждого бокса LI устанавливается элементом UL.
  • Высота каждого бокса LI задаётся высотой содержимого плюс верхнее и нижнее заполнение, рамки и поля. Обратите внимание, что горизонтальные поля между боксами LI сжаты.
  • Правое заполнение боксов LI было установлено шириной 0 (свойство 'padding'). Результат виден на второй иллюстрации.
  • Поля боксов LI прозрачны - поля всегда прозрачны - так что цвет фона (зелёный) заполнения и области содержимого UL просвечивает сквозь него.
  • Второй элемент LI специфицирует пунктирную рамку (свойство 'border-style').

8.3 Свойства поля: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin'

Свойства поля специфицируют область полей бокса. Сокращённое свойство 'margin' устанавливает поле для всех четырёх сторон, в то время как другие свойства устанавливают только соответствующие стороны.

Свойства, определённые в этом разделе, относятся к типу значений <margin-width>, который может устанавливаться в:

<length>
Специфицирует фиксированную ширину.
<percentage>
Процентное значение высчитывается относительно ширины содержащего блока сгенерированного бокса. Это верно для 'margin-top' и 'margin-bottom' везде, кроме контекста страницы, где процентные значения относятся к высоте бокса страницы.
auto
См. расчёт ширины и полей.

Негативные значения свойств полей допускаются, но могут существовать ограничения, специфичные для конкретных реализаций.

'margin-top', 'margin-right', 'margin-bottom', 'margin-left'
Значение:<margin-width> | inherit
Начальное:0
Применяется: ко всем элементам
Наследуется:нет
Процентное:относительно ширины содержащего блока
Носитель:визуальный

Это свойство устанавливает верхнее, нижнее, правое и левое поля бокса.

Пример(ы):

H1 { margin-top: 2em }
'margin'
Значение:<margin-width>{1,4} | inherit
Начальное:не определено для сокращённого свойства
Применяется: ко всем элементам
Наследуется:нет
Процентное:относительно ширины содержащего блока
Носитель:визуальный

'margin' - это сокращённое свойство для установки значений 'margin-top', 'margin-right', 'margin-bottom' и 'margin-left' в одном месте в таблице стилей.

Если имеется одно значение, то оно применяется ко всем сторонам. Если дано два значения, верхнее и нижнее поля устанавливаются в первое, а правое и левое поля - во второе значение. Если дано три значения, верхнее поле устанавливается в первое, левое и правое - во второе, а нижнее поле - в третье значение. Если задано четыре значения, они применяются к верхнему, правому, нижнему и левому полям соответственно.

Пример(ы):

BODY { margin: 2em }         /* все поля установлены в 2em */
BODY { margin: 1em 2em }     /* верхнее и нижнее = 1em, правое и левое = 2em */
BODY { margin: 1em 2em 3em } /* верхнее=1em, правое=2em, нижнее=3em, левое=2em */

Последнее правило эквивалентно следующему:

BODY {
  margin-top: 1em;
  margin-right: 2em;
  margin-bottom: 3em;
  margin-left: 2em;          /* копируется из противоположной стороны (из правой) */
}

8.3.1 Сжатие полей

В этой спецификации выражение сжатие полей означает, что смежные поля (не разделённые заполнением и рамками) двух или более боксов (которые могут быть последовательными или вложенными) образуют единое поле.

В CSS2 вертикальные поля никогда не сжимаются.

Горизонтальные поля могут сжиматься между определёнными боксами:

  • Два или более смежных горизонтальных поля боксов блока при нормальном расположении сжимаются. Результирующая ширина поля - это максимальная ширина из смежных полей. В случае негативных значений полей, абсолютный максимум негативных смежных полей отсчитывается от максимума позитивных смежных полей. Если нет позитивных полей, абсолютный максимум негативных смежных полей отсчитывается от нуля.
  • Вертикальные поля между обтекаемым боксом и любым другим боксом не сжимаются.
  • Поля абсолютно и относительно позиционированных боксов не сжимаются.

См. иллюстрацию сжимаемых полей в примере полей, заполнения и рамок.

8.4 Свойства заполнения: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' и 'padding'

Свойства обтекания специфицируют ширину области заполнения бокса. Сокращённое свойство 'padding' устанавливает заполнение для всех четырёх сторон, а другие свойства заполнения устанавливают соответствующие стороны.

Свойства, определённые в этом разделе, относятся к типу значений <padding-width>, который может устанавливаться в:

<length>
Специфицирует фиксированную ширину.
<percentage>
Процентное, высчитывается относительно ширины содержащего блока, генерирующего бокс, в том числе и для 'padding-top' и 'padding-bottom'.

В отличие от свойств полей, значения заполнения не могут быть негативными. Как и в свойствах полей, процентные значения свойств заполнения относятся к ширине бокса, сгенерированного содержащим блоком.

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
Значение:<padding-width> | inherit
Начальное:0
Применяется: ко всем элементам
Наследуется:нет
Процентное:относительно ширины содержащего блока
Носитель:визуальный

Эти свойства устанавливают верхнее, правое, нижнее и левое заполнение для бокса.

Пример(ы):

BLOCKQUOTE { padding-top: 0.3em }
'padding'
Значение:<padding-width>{1,4} | inherit
Начальное:не определено для сокращённого свойства
Применяется: ко всем элементам
Наследуется: нет
Процентное:относительно ширины содержащего блока
Носитель:визуальный

Свойство 'padding' - это сокращённое свойство для установки 'padding-top', 'padding-right', 'padding-bottom' и 'padding-left' в одном месте в таблице стилей.

Если имеется одно значение, то оно применяется ко всем сторонам. Если дано два значения, верхнее и нижнее заполнение устанавливаются в первое, а правое и левое заполнения - во второе значение. Если дано три значения, верхнее заполнение устанавливается в первое, левое и правое - во второе, а нижнее заполнение - в третье значение. Если задано четыре значения, они применяются к верхнему, правому, нижнему и левому заполнениям соответственно.

Цвет поверхности области заполнения специфицируется через свойство 'background':

Пример(ы):

H1 {
  background: white;
  padding: 1em 2em;
}

Вышеприведённый пример специфицирует вертикальное заполнение '1em' ('padding-top' и 'padding-bottom') и горизонтальное заполнение '2em' ('padding-right' и 'padding-left'). Единицы измерения 'em' относительны к размеру шрифта элемента: '1em' эквивалентно размеру используемого шрифта.

8.5 Свойства рамки

Свойства рамки специфицируют ширину, цвет и стиль области рамки бокса. Эти свойства применимы ко всем элементам.

Примечание. Особенно в HTML, ПА могут отображать рамки определённых элементов (например, кнопок, меню и т.п.) иначе, чем у "обычных" элементов.

8.5.1 Ширина рамки: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' и 'border-width'

Свойства ширины рамки специфицируют ширину области рамки. Свойства, определённые в этом разделе, относятся к типу значений <border-width>, который может устанавливаться в:

thin
Тонкая рамка.
medium
Средняя рамка.
thick
Толстая рамка.
<length>
Толщина рамки имеет точное значение. Это значение не может быть негативным.

Интерпретация первых трёх значений зависит от ПА. Следующие соотношения, однако, обязаны выдерживаться:

'thin' <='medium' <= 'thick'.

К тому же эти значения ширины обязаны быть константными в пределах документа.

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'
Значение:<border-width> | inherit
Начальное:medium
Применяется: ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Эти свойства устанавливают верхнюю, правую, нижнюю и левую линии рамки для бокса.

'border-width'
Значение:<border-width>{1,4} | inherit
Начальное:см. индивидуальные свойства
Применяется: ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Это сокращённое свойство для установки 'border-top-width', 'border-right-width', 'border-bottom-width' и 'border-left-width' в одном месте в таблице стилей.

Если имеется одно значение, то оно применяется ко всем сторонам. Если дано два значения, верхняя и нижняя линии рамки устанавливаются в первое, а правая и левая линии рамки - во второе значение. Если дано три значения, верхняя линия рамки устанавливается в первое, левая и правая - во второе, а нижняя линия рамки - в третье значение. Если задано четыре значения, они применяются к верхней, правой, нижней и левой линиям рамки соответственно.

Пример(ы):

Комментарии в данном примере поясняют результаты установки ширины верхней, правой, нижней и левой линий рамки:

H1 { border-width: thin }                   /* thin thin thin thin */
H1 { border-width: thin thick }             /* thin thick thin thick */
H1 { border-width: thin thick medium }      /* thin thick medium thick */

8.5.2 Цвет рамки: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' и 'border-color'

Эти свойства специфицируют цвет рамки бокса.

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'
Значение:<color> | inherit
Начальное:значение свойства 'color'
Применяется: ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный
'border-color'
Значение:<color>{1,4} | transparent | inherit
Начальное:см. индивидуальные свойства
Применяется: ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Свойство 'border-color' устанавливает цвет рамки с четырёх сторон.
Значения имеют следующий смысл:

<color>
Специфицирует значение цвета.
transparent
Рамка прозрачна (хотя и может иметь ширину).

Свойство 'border-color' может иметь от одного до четырёх значений, и эти значения устанавливаются для четырёх сторон так же, как и в 'border-width'.

Если цвет рамки элемента не специфицирован в свойстве рамки, ПА обязаны использовать значение свойства 'color' элемента как вычисленное значение цвета рамки.

Пример(ы):

В этом примере рамка будет сплошной и чёрной:

P {
  color: black;
  background: white;
  border: solid;
}

8.5.3 Стиль рамки: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' и 'border-style'

Свойства стиля рамки специфицируют стиль линии рамки бокса (solid, double, dashed и т.д.). Свойства, определённые в этом разделе, относятся к типу значений <border-style>, который может устанавливаться в:

none
Нет рамки. Форсирует вычисленное значение 'border-width' в '0'.
hidden
То же, что и 'none', за исключением разрешения конфликтов рамок для элементов таблицы.
dotted
Рамка из точек.
dashed
Рамка из пунктирных линий.
solid
Рамка из сплошной линии.
double
Двойная сплошная линия. Сумма двух линий и пространства между ними равна значению 'border-width'.
groove
Рамка выглядит как вырезанная в канве.
ridge
Противоположно 'groove': рамка выглядит как выступающая над канвой.
inset
Весь бокс выглядит вдавленным в канву.
outset
Противоположно 'inset': выпуклый бокс.

Все рамки прорисовываются на поверхности фона бокса. Цвет рамок со значениями 'groove', 'ridge', 'inset' и 'outset' зависит от свойства 'color' элемента.

Соответствующие пользовательские агенты (ПА) HTML могут интерпретировать 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' и 'outset' как 'solid'.

'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'
Значение:<border-style> | inherit
Начальное:none
Применяется: ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный
'border-style'
Значение:<border-style>{1,4} | inherit
Начальное:см. индивидуальные свойства
Применяется: ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Свойство 'border-style' устанавливает стиль для четырёх сторон рамки. Может иметь от одного до четырёх значений, и значения устанавливаются для разных сторон, как для 'border-width' выше.

Пример(ы):

#xy34 { border-style: solid dotted }

В этом примере горизонтальные линии рамки будут 'solid', а вертикальные - 'dotted'.

Поскольку начальное значение стиля рамки - 'none', рамка будет видна только после установки значения стиля.

8.5.4 Сокращённые свойства рамок: 'border-top', 'border-bottom', 'border-right', 'border-left' и 'border'

'border-top', 'border-right', 'border-bottom', 'border-left'
Значение:[ <'border-top-width'> || <'border-style'> || <color> ] | inherit
Начальное:см. индивидуальные свойства
Применяется: ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Это сокращённое свойство для установки ширины, стиля и цвета верхней, правой, нижней и левой сторон рамки.

Пример(ы):

H1 { border-bottom: thick solid red }

Это правило устанавливает ширину, стиль и цвет рамки после элемента H1. Опущенные значения установлены в свои начальные значения. Поскольку нижеследующее правило не специфицирует цвет рамки, рамка будет иметь цвет, определённый свойством 'color':

H1 { border-bottom: thick solid }
'border'
Значение:[ <'border-width'> || <'border-style'> || <color> ] | inherit
Начальное:см. индивидуальные свойства
Применяется: ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Свойство 'border' - это сокращённое свойство для установки одинаковых значений ширины, цвета и стиля для всех четырёх сторон рамки бокса. В отличие от сокращённых свойств 'margin' и 'padding', свойство 'border' не может устанавливать разные значения для четырёх сторон. Для этого придётся использовать одно или более других свойств.

Пример(ы):

Первое правило эквивалентно установке четырёх последующих значений:

P { border: solid red }
P {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red
}

Поскольку, в некоторой степени, свойства могут перекрываться, порядок, в котором правила специфицированы, имеет важное значение.

Пример(ы):

BLOCKQUOTE {
  border-color: red;
  border-left: double;
  color: black
}

В приведённом примере цвет левой линии рамки - чёрный, а других линий - красный. Это потому, что в 'border-left' установлены ширина, стиль и цвет. Поскольку значение цвета в свойстве 'border-left' не установлено, оно будет взято из свойства 'color'. Фактически свойство 'color' , установленное после свойства 'border-left' , не имеет к этому никакого отношения.


Полное описание иллюстрации областей бокса

Эта диаграмма изображает четыре области бокса CSS: содержимое, заполнение, рамку и поля.

Здесь четыре вложенных бокса: внутренний - содержимое, затем - заполнение, рамка и поля. Каждая область имеет свой стиль обрамления: край содержимого - тонкий и сплошной; край заполнения - тонкий и идёт точками; рамка - толстая сплошная; поля - толстые и точками.

Под боксами легенда перечисляет 4 стиля обрамления, используемые здесь.


Полное описание примера бокса-списка, показывающего поля,заполнения и рамки

Полное описание примера бокса-списка, показывающего поля, заполнение и рамки

Эта диаграмма показывает боксы, сгенерированные списками UL, с двумя элементами LI списка.

У иллюстрации две части.

Первая показывает реальный вид боксов, сгенерированных элементами списка. Цвета фона и стили обрамления различаются для показа границ областей боксов.

Вторая часть показывает тот же вид, но содержимое, заполнение, рамки и края полей каждого бокса показаны явно. Хорошо видно, что вертикальные поля между боксами LI сжаты.


Установка значений свойств, Каскадирование и Наследование

6 Установка значений свойств, Каскадирование и Наследование

Содержание

  • 6.1 Специфицированные, вычисленные и текущие значения
    • 6.1.1 Специфицированные значения
    • 6.1.2 Вычисленные значения
    • 6.1.3 Реальные (текущие) значения
  • 6.2 Наследование
    • 6.2.1 Значение 'inherit'
  • 6.3 Правило @import
  • 6.4 Каскад
    • 6.4.1 Порядок каскадирования
    • 6.4.2 Правила !important
    • 6.4.3 Вычисление специфики селектора
    • 6.4.4 Старшинство не-CSS подсказок

6.1 Специфицированные, вычисленные и текущие значения

После того, как ПА разобрал документ и сконструировал дерево документа, он обязан назначить каждому элементу дерева значение для каждого свойства, применимое для целевого типа носителя.

Конечное значение свойства является результатом трёхступенчатого процесса вычисления: значение определяется по спецификации ("специфицированное значение"), затем, если необходимо, выводится абсолютное значение ("вычисленное значение") и наконец - трансформируется в соответствии с ограничениями локальной среды ("реальное значение").

6.1.1 Специфицированные значения

ПА обязаны сначала назначить свойству специфицированное значение на основе следующих механизмов (по приоритету):

  1. Если каскад даёт значение, использовать его.
  2. Иначе, если свойство унаследовано, использовать значение элемента-предка, обычно - вычисленное значение.
  3. Иначе, использовать начальное значение свойства. Начальное значение каждого свойства указано в определении свойства.

Не имея предков, корневой элемент дерева документа не может использовать значения, унаследованные от элемента-предка; в этом случае используется, если необходимо, начальное значение.

6.1.2 Вычисленные значения

Специфицированные значения могут быть абсолютными (т.е. не специфицированными относительно других значений: 'red' или '2mm') или относительными (т.е. специфицированными относительно других значений: 'auto', '2em', '12%'). Для абсолютных значений не требуется никаких вычислений, чтобы найти вычисленное значение.

Относительные значения, с другой стороны, обязаны быть трансформированы в вычисленные значения: процентные рассчитываются относительно данного значения-ссылки (каждое свойство определяет соответствующее значение), значения с указанием единиц измерения (em, ex, px) должны быть сделаны абсолютными путём применения подходящих по размеру шрифтов или в пикселах, значения 'auto' должны высчитываться по формулам, данным для каждого свойства, ключевые слова ('smaller', 'bolder', 'inherit') должны быть замещены в соответствии со своими определениями.

В большинстве случаев элементы наследуют вычисленные значения. Однако есть некоторые свойства, чьи специфицированные значения могут наследоваться (например, числовое значение свойства 'line-height'). В тех случаях , когда дочерние элементы не наследуют вычисленные значения, это описывается в определении свойства.

6.1.3 Реальные значения

Вычисленное значение в принципе готово для использования, но ПА могут не иметь возможности использовать такое значение в имеющемся окружении. Например, ПА могут иметь возможность представлять рамки лишь размером в целое число пикселов и, следовательно, должны сделать приближение до вычисленной ширины. Реальное значение - это вычисленное значение после выполнения некоторого приближения.

6.2 Наследование

Некоторые значения наследуются потомками элемента в дереве документа. Каждое свойство определяет, наследуется оно или нет.

Предположим, имеется элемент H1 с выделенным элементом (EM) внутри:

<H1>The headline <EM>is</EM> important!</H1>

Если цвет элементу EM не назначен, выделенное "is" будет наследовать цвет элемента-предка, и, поскольку H1 имеет голубой цвет, элемент EM будет, соответственно, голубым.

Чтобы установить свойство стиля "по умолчанию" в документе, авторы могут установить это свойство в корне дерева документа. В HTML, например, эту функцию могут выполнить элементы HTML или BODY. Заметьте, что это будет работать, даже если автор опустит тэг BODY в тексте HTML, поскольку разборщик HTML вставит отсутствующие тэги.

Пример(ы):

Например, поскольку свойство 'color' наследуется, все потомки элемента BODY будут наследовать цвет 'black':

BODY { color: black; }

Специфицированные процентные значения не наследуются, а вычисленные значения - наследуются.

Пример(ы):

В данной таблице:

BODY { font-size: 10pt }
H1 { font-size: 120% }

и в этом фрагменте документа:

<BODY>
  <H1>A <EM>large</EM> heading</H1>
</BODY>

свойство 'font-size' элемента H1 будет иметь вычисленное значение'12pt' (120% от 10pt, значения-предка). Поскольку значение свойства 'font-size' наследуется, элемент EM также получит вычисленное значение '12pt'. Если ПА не имеет доступного шрифта в 12pt, реальное значение 'font-size' и для H1, и для EM может быть, например, '11pt'.

6.2.1 Значение 'inherit'

Каждое свойство может иметь специфицированное значение 'inherit', которое означает, что для данного элемента свойство принимает то же самое вычисленное значение, что и свойство элемента-предка. Наследуемое значение, которое как правило используется только как возвращаемое значение, может быть усилено путём явной установки 'inherit'.

Пример(ы):

В следующем примере свойства 'color' и 'background' установлены в элементе BODY. Во всех других элементах значение 'color' будет наследоваться, а фон будет прозрачным. Если эти правила являются частью пользовательской таблицы стилей, чёрный текст на белом фоне будет форсирован по всему документу.

BODY {
  color: black !important;
  background: white !important;
}

* {
  color: inherit !important;
  background: transparent;
}

6.3 Правило @import

Правило '@import' даёт пользователям возможность импортировать правила стиля из других таблиц стилей. Любое правило @import обязано предшествовать всем наборам правил в таблице стилей. После ключевого слова '@import' обязан следовать URI подключаемой таблицы стилей. Допустима также строка; она будет интерпретироваться так, как будто имеет вокруг себя url(...).

Пример(ы):

Следующие строки эквивалентны по значению и обе иллюстрируют синтаксис '@import' (одно с "url()", а другое - с простой строкой):

@import "mystyle.css";
@import url("mystyle.css");

Поскольку ПА могут исключать запрос ресурсов неподдерживаемых типов носителя, авторы могут специфицировать медиа-зависимые правила @import. Эти условные @import специфицируют список разделённых запятыми типов носителя после URI.

Пример(ы):

Следующие правила имеют такой же эффект, как если бы импортированная таблица стилей была перенесена в правило @media для того же типа, но данные правила позволят исключить бесполезную нагрузку на ПА.

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;

При отсутствии любых типов носителя, импорт является безусловным. Спецификация 'all' для носителя имеет тот же эффект.

6.4 Каскад

Таблицы стилей могут иметь три независимых источника: автор, пользователь и ПА.

  • Автор. Специфицирует таблицы стилей для документа-источника в соответствии с соглашениями о языке документа. К примеру, в HTML таблицы стилей могут быть включены в документ или иметь внешнюю связь.
  • Пользователь. Может иметь возможность специфицировать стилевую информацию для определённого документа. Например, пользователь может специфицировать файл, содержащий таблицу стилей, или ПА может предоставить интерфейс, генерирующий пользовательскую таблицу стилей (или вести себя так, как если бы предоставлял).
  • Пользовательский агент. Соответствующие ПА обязаны применять таблицу стилей по умолчанию (или вести себя так, как если бы применяли) до того, как применять к документу все другие таблицы стилей. Таблицы стилей по умолчанию в ПАгенте должны представить элементы языка документа теми способами, которые удовлетворяют общим ожиданиям для языка документа (например, для визуальных браузеров, элемент EM в HTML представляется шрифтом italic). См. "Образец таблицы стилей HTML 4.0" - рекомендуемую таблицу стилей по умолчанию для документов HTML 4.0.

    Учтите, что таблица стилей по умолчанию может быть изменена, если системные настройки изменены пользователем (например, системные цвета). Однако, из-за ограничений конкретной реализации ПА, может оказаться невозможным изменить значения в таблице стилей по умолчанию.

Области видимости таблиц стилей из этих трёх источников будут перекрываться и взаимодействовать в соответствии с каскадом.

Каскад CSS назначает вес каждому правилу стиля. Если применяются несколько правил, одно, имеющее больший вес, будет иметь приоритет.

По умолчанию правила авторской таблицы стилей имеют больший вес, чем правила таблицы стилей пользователя. Преимущество зарезервировано, однако, для правил "!important". Все правила пользователя и автора имеют больший вес, чем правила таблицы стилей по умолчанию в ПА.

Импортируемы таблицы стилей также каскадируются, и их вес зависит от порядка импортирования. Правила, специфицированные в имеющейся таблице стилей, переопределяют правила, импортируемые из других таблиц. Импортированные таблицы стилей сами могут импортировать и переопределять другие таблицы стилей рекурсивно, и тогда применяются те же правила приоритета.

6.4.1 Порядок каскадирования

Чтобы найти значение для комбинации элемент/свойство, ПА обязаны применять следующий порядок сортировки:

  1. Найти все объявления, применяемые в запросе к элементу и свойству, для целевого типа носителя. Объявления применяются, если ассоциированный селектор подбирает элемент в запросе.
  2. Сначала объявления сортируются по весу и источнику: для нормальных объявлений - авторские таблицы стилей переопределяют пользовательские, которые, в свою очередь, переопределяют таблицу стилей по умолчанию. Для объявлений "!important" - пользовательские таблицы стилей переопределяют авторские таблицы, которые, в свою очередь, переопределяют таблицу стилей по умолчанию. Объявления "!important" переопределяют нормальные объявления. Импортированная таблица стилей имеет тот же источник, что и таблица стилей, импортировавшая её.
  3. Вторая сортировка производится по специфике селектора: более специфические селекторы переопределяют более общие. Псевдоэлементы и псевдоклассы обсчитываются как нормальные элементы и классы соответственно.
  4. Наконец, идёт сортировка по специфицированному порядку: если два правила имеют одинаковые вес, источник и специфику, выбирается специфицированное позже. Правила в импортируемых таблицах стилей рассматриваются перед любыми правилами имеющейся таблицы стилей.

Независимо от установок "!important" индивидуальных объявлений, эта стратегия даёт авторским таблицам стилей больший вес, чем таблицам читателя. Это тем более важно, поскольку ПА предоставляют пользователю возможность отключить влияние определённых таблиц стилей, например, в выпадающих меню.

6.4.2 Правила !important

CSS пытается создать баланс между авторскими и пользовательскими таблицами стилей. По умолчанию правила авторской таблицы стилей переопределяют правила пользовательской таблицы (см. каскадное правило 3).

Однако, для баланса, объявление "!important" (ключевое слово "!" и "important" следуют за объявлением) имеет преимущество перед нормальной декларацией. И авторские, и пользовательские таблицы стилей могут содержать объявление "!important", и пользовательские правила "!important" переопределяют авторские "!important". Это свойство CSS улучшает доступность документов путём предоставления пользователям со специфическими требованиями (крупные шрифты, комбинации цветов и т.п.) контроля над представлением.

Примечание. Это семантическое изменение в сравнении с CSS1. В CSS1 авторские правила "!important" имели приоритет перед пользовательскими правилами "!important".

Объявление сокращённого свойства (например, 'background') как "!important" эквивалентно объявлению всех его подсвойств как "!important".

Пример(ы):

Первое правило пользовательской таблицы стилей в данном примере содержит объявление "!important", которое переопределяет соответствующее объявление в авторской таблице стилей. Второе объявление также будет иметь приоритет как помеченное "!important". Однако третье правило пользовательской таблицы стилей - не "!important" - и поэтому будет отброшено в пользу второго правила авторской таблицы стилей (которое устанавливает стиль сокращённого свойства). Таким образом, третье авторское правило будет отброшено в пользу второго авторского правила, поскольку второе правило - "!important". Это показывает, что объявления "!important" имеют действие также и внутри авторских таблиц стилей.

/* Из пользовательской таблицы стилей */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }

/* Из авторской таблицы стилей  */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }

6.4.3 Вычисление специфики селектора

Специфика селектора высчитывается так:

  • вычисляется количество атрибутов ID в селекторе (= a)
  • вычисляется количество других атрибутов и псевдоклассов в селекторе (= b)
  • вычисляется количество имён элементов в селекторе (= c)
  • игнорируются псевдоэлементы.

Конкатенация трёх чисел a-b-c (в числовой системе с большой базой) дают специфику.

Пример(ы):

*             {}  /* a=0 b=0 c=0 -> специфика =   0 */
LI            {}  /* a=0 b=0 c=1 -> специфика =   1 */
UL LI         {}  /* a=0 b=0 c=2 -> специфика =   2 */
UL OL+LI      {}  /* a=0 b=0 c=3 -> специфика =   3 */
H1 + *[REL=up]{}  /* a=0 b=1 c=1 -> специфика =  11 */
UL OL LI.red  {}  /* a=0 b=1 c=3 -> специфика =  13 */
LI.red.level  {}  /* a=0 b=2 c=1 -> специфика =  21 */
#x34y         {}  /* a=1 b=0 c=0 -> специфика = 100 */

В HTML значения атрибута "style" элемента являются правилами таблицы стилей. Эти правила не имеют селекторов, но для целей шага 3 каскадного алгоритма они рассматриваются как имеющие селектор ID (специфика: a=1, b=0, c=0). Для целей шага 4 они рассматриваются после всех других правил.

<HEAD>
<STYLE type="text/css">
  #x97z { color: blue }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: red">
</BODY>

В данном примере цвет элемента P будет красным. Хотя специфика - одна и та же для обоих объявлений, объявление атрибута "style" переопределит объявление в элементе STYLE в соответствии с каскадным правилом 4.

6.4.4 Старшинство не-CSS подсказок

ПА могут предпочесть подсказки (hints) из других источников, а не из таблиц стилей, например, элемент FONT или атрибут "align" в HTML. Если это так, не-CSS подсказки обязаны быть переведены в соответствующие правила CSS со спецификой=0. Принимается, что правила находятся в начале авторской таблицы стилей и могут быть переопределены последующими правилами таблиц стилей.

Примечание. В фазе переноса эта политика облегчит сосуществование стилистических атрибутов с таблицами стилей.

Примечание. В CSS1 не-CSS подсказки получали специфику=1, а не 0. Это изменение сделано из-за введения универсального селектора, имеющего специфику 0.


Полное описание примера вычисления рядав таблицы и вертикального выравнивания ячеек

Полное описание примера вычисления высоты рядов таблицы и вертикального выравнивания ячеек

Эта диаграмма показывает, как свойство 'vertical-align' ячеек комбинируется для определения высоты ряда, содержащего эти ячейки.
Диаграмма также иллюстрирует некоторые значения 'vertical-align', которые применяются к ячейкам таблицы: baseline, top, bottom и middle.

На диаграмме показан ряд из пяти (с лэйблами) ячеек таблицы различной высоты и выравнивания. Справа от ряда лэйблы обозначают свойство горизонтальной позиции ряда: top, baseline, middle и bottom (от top до bottom).

Первая ячейка выровнена по базовой линии ряда и растянута до верха ряда.
Вторая ячейка также выровнена по базовой линии ряда и растянута до верха ряда.
Третья ячейка выровнена по верху ряда и растянута до середины ряда.
Четвёртая ячейка выровнена по низу ряда и растянута до середины ряда.
Пятая ячейка выровнена по середине ряда и не достигает ни верха, ни низа ряда.
Красная горизонтальная линия внутри каждой ячейки показывает, как она выровнена вертикально в боксе ряда.


Пример баннера

Полное описание примера баннера

Эта диаграмма иллюстрирует использование абсолютного позиционирования для создания эффекта сменяющих друг друга изображений. Баннер (представленный на изображении двумя дефисами) появляется в пространстве размером 10px слева от параграфа.

На иллюстрации показана вертикальная линия, обозначающая левый край содержащего блока параграфа. Текст параграфа (чёрный) смещён на 10px от этого края (показано на диаграмме). Баннеры (два красных дефиса) появляются слева от слова "THIS", которым начинается четвёртая строка текста.

Следующий элемент PRE симулирует пример. Вертикальные линии обозначают левый край содержащего блока.

|   I used two red hyphens to serve
|   as a change bar. They will "float"
|   to the left of the line containing
| --THIS word.


Приложение B: Изменения по сравнению с CSS1

Приложение В. Изменения по сравнению с CSS1

Содержание

  • B.1 Новая функциональность
  • B.2 Обновлённые описания
  • B.3 Семантические изменения по сравнению с CSS1

Это приложение является информативным, но не нормативным.

CSS2 построен на основе CSS1, и все действительные таблицы стилей CSS1 являются действительными таблицами стилей CSS2. Изменения между спецификацией CSS1 (см. [CSS1]) и данной спецификацией делятся на три группы: новая функциональность, обновлённые описания функциональности CSS1 и изменения по сравнению с CSS1.

B.1 Новая функциональность

В дополнение к функциональности CSS1, CSS2 поддерживает:

  • Понятие типов носителя.
  • Значение 'inherit' для всех свойств.
  • Страничные носители
  • Звуковые таблицы стилей
  • Несколько опций интернационализации, включая стили нумерации списков, поддержку двунаправленного текста и чувствительных к языку знаков кавычек.
  • Расширенный механизм выбора шрифта, включая смысловой подбор, синтез и загружаемые шрифты. Введены также понятие системных шрифтов и новое свойство 'font-size-adjust'.
  • Таблицы, включая новые значения 'display' и 'vertical-align'.
  • Относительное и абсолютное позиционирование, включая фиксированное позиционирование.
  • Новые типы боксов (наряду с блок- и инлайн-): compact и run-in.
  • Возможность контролировать переполнение, сжатие и видимость содержимого в модели визуального форматирования.
  • Возможность специфицировать максимальные и минимальные ширину и высоту в модели визуального форматирования.
  • Расширенный механизм селекторов, включая дочерние селекторы, смежные селекторы и селекторы атрибутов.
  • Генерируемое содержимое, счётчики и автоматическую нумерацию и маркёры.
  • Оттенение текста с помощью нового свойства 'text-shadow'.
  • Различные новые псевдоклассы, :first-child, :hover, :focus, :lang.
  • Системные цвета и шрифты.
  • Курсоры.
  • Динамические схемы.

B.2 Обновлённые описания

Спецификация CSS1 была короче и компактнее. Данная спецификация намного объёмнее и более читабельна. Большая часть нового материала описывает новую функциональность, но описания из CSS1 также расширены. За исключением немногих случаев, описанных ниже, обновлённые описания не изменили ни синтаксис, ни семантику.

B.3 Семантические изменения по сравнению с CSS1

Хотя все действительные таблицы стилей CSS1 являются таковыми и в CSS2, есть несколько случаев, когда таблицы стилей CSS1 будут иметь другие значения при интерпретации в качестве таблиц CSS2. Большинство изменений обусловлено опытом разработки, но есть также и корректировка некоторых ошибок.

  • Значение "!important" изменено. В CSS1 "!important" в таблице стилей автора имел преимущество перед "!important" таблицы стилей пользователя. В CSS2 сделано наоборот.
  • В CSS2 значения цвета ужаты в соответствии с гаммой устройства, а не с гаммой sRGB, как в CSS1.
  • В CSS1 просто указано, что 'margin-right' игнорировалось, если 'margin-left' и 'width' были установлены. В CSS2 выбор между смягчением 'margin-right' или 'margin-left' зависит от направления письма.
  • В CSS1 некоторые свойства (например, 'padding') имели значения, ссылающиеся на ширину родительского элемента. Это было ошибкой; значение всегда должно ссылаться на ширину элемента уровня блока, и данная спецификация отражает это путём ввода термина "containing block/содержащий блок".
  • Начальное значение 'display' - 'inline' в CSS2, а не 'block', как в CSS1.
  • В CSS1 свойство 'clear' применялось ко всем элементам. Это было ошибкой, и в CSS2 свойства применяются только к элементам уровня блока.
  • В CSS1 ':link', ':visited' и ':active' были взаимоисключающими; в CSS2 ':active' может появляться вместе с ':link' или ':visited'.
  • Предлагаемый фактор масштаба между смежными индексами 'font-size' в таблице размеров шрифтов уменьшен с 1.5 до 1.2.
  • Теперь наследуется вычисленное, а не текущее, значение 'font-size'.
  • CSS1-описание 'inside' (для 'list-style-position'), допускало воздействие на левое поле текста, а не на позицию маркёра. В CSS2 такая интерпретация правила устранена.
  • См. также нормативный раздел Различия между символизаторами CSS1 и CSS2.


Полное описание примера сжатия областей

Полное описание сжатия областей

На этой диаграмме изображено два бокса блока, один над другим, с прямоугольным сжатием областей различных размеров.

Боксы блока (генерируемые для элемента P) идентичны и обозначены толстой чёрной рамкой и серым фоном. Система координат начинается в левом верхнем углу каждого бокса блока. Ось x возрастает вдоль верхнего края бокса P, ось y - вниз по левому краю. Обе оси имеют шаг 5px.

Сжимаемая область первого бокса P полностью расположена внутри него, смещение 5px от верхнего и левого краёв бокса P и 10px - от правого и нижнего краёв. Сжимаемая область имеет толстую пунктирную рамку и белый фон и помечена "clip region".

Сжимаемая область второго бокса P похожа на первый стилем и позицией, за исключением того, что правый край выступает на 5px за правый край бокса P. Таким образом, сжимаемая область находится частично вне бокса P.


Цвета и фон

14 Цвета и фон

Содержание

  • 14.1 Цвет переднего плана: свойство 'color'
  • 14.2 Фон
    • 14.2.1 Свойства фона: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' и 'background'
  • 14.3 Коррекция цветовой гаммы

Свойства CSS позволяют авторам специфицировать цвет переднего плана и фона элементов. В качестве фона используется цвет или изображение. Свойства фона позволяют авторам позиционировать фоновое изображение, размножать его и объявлять как фиксированное относительно порта просмотра или прокручивать вместе с документом.

Синтаксис значений цвета см. в разделе единицы измерения цвета.

14.1 Цвет переднего плана: свойство 'color'

'color'
Значение:<color> | inherit
Начальное:зависит от пользовательского агента (ПА)
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:визуальный

Это свойство описывает цвет переднего плана содержимого текста элемента. Можно по разному специфицировать красный цвет:

Пример(ы):

EM { color: red }              /* предопределённое название цвета */
EM { color: rgb(255,0,0) }     /* диапазон RGB 0-255   */

14.2 Фон

Авторы могут специфицировать фон элемента (т.е. его видимую поверхность) как цвет или как изображение. В терминах модели бокса, "background" относится к фону содержимого и области заполнения. Цвет и стиль обрамления устанавливаются в свойствах обрамления. Поля всегда прозрачны, поэтому фон бокса-предка всегда просвечивает.

Свойства фона не наследуются, но фон бокса-предка будет по умолчанию просвечивать, поскольку начальное значение 'background-color' - 'transparent'.

Фон бокса, генерируемый корневым элементом, покрывает всю канву.

Для документов HTML, однако, мы рекомендуем, чтобы авторы специфицировали фон элемента BODY, а не элемента HTML.
ПА должны учитывать следующие правила приоритета при заполнении фона: если значение свойства 'background' для элемента HTML отлично от 'transparent', тогда используйте его, в ином случае - используйте значение свойства 'background' элемента BODY. Если результирующее значение - 'transparent', то представление не определено.

В соответствии с этими правилами, канва следующего документа HTML будет иметь фон "marble":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Установка фона канвы</TITLE>
    <STYLE type="text/css">
       BODY { background: url("http://style.com/marble.png") }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Мой фон - marble.
  </BODY>
</HTML>

14.2.1 Свойства фона: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' и 'background'

'background-color'
Значение:<color> | transparent | inherit
Начальное:transparent
Применяется: ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Это свойство устанавливает цвет фона элемента значением <color> или ключевым словом 'transparent' (чтобы сделать фон подложки просвечивающим).

Пример(ы):

H1 { background-color: #F00 }
'background-image'
Значение:<uri> | none | inherit
Начальное:none
Применяется: ко всем элементам
Наследуется:нет
Процентное: N/A
Носитель:визуальный

Это свойство устанавливает изображение-фон элемента. При установке изображения для фона авторам необходимо также специфицировать цвет фона, который будет использоваться, если изображение окажется недоступным. Если изображение доступно, оно выводится поверх цвета фона. (Таким образом, цвет фона будет виден в прозрачных участках изображения).

Значениями данного свойства являются <uri>, для спецификации изображения, или 'none', если изображение не используется.

Пример(ы):

BODY { background-image: url("marble.gif") }
P { background-image: none }
'background-repeat'
Значение:repeat | repeat-x | repeat-y | no-repeat | inherit
Начальное:repeat
Применяется:ко всем элементам
Наследуется:нет
Процентное: N/A
Носитель:визуальный

Если специфицировано изображение фона, то данное свойство определяет, повторяется ли данное изображение (размножается ли), и как. Размноженное изображение покрывает области содержимого и заполнения бокса.
Значения имеют следующий смысл:

repeat
Изображение размножается горизонтально и вертикально.
repeat-x
Изображение размножается только горизонтально .
repeat-y
Изображение размножается только вертикально.
no-repeat
Изображение не размножается: выводится только одна копия изображения.

Пример(ы):

BODY {
  background: white url("pendant.gif");
  background-repeat: repeat-y;
  background-position: center;
}

A centered background image, with copies repeated up and down the padding and content areas. [D]

Единственная копия фонового изображения центрирована, а другие копии помещены выше и ниже, чтобы создать вертикальную ленту позади элемента.

'background-attachment'
Значение:scroll | fixed | inherit
Начальное:scroll
Применяется: ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Если специфицировано изображение фона, то данное свойство определяет, является ли оно фиксированным относительно порта просмотра ('fixed'), или прокручивается вместе с документом ('scroll').

Даже если изображение зафиксировано, оно будет видно только в том случае, если находится в области фона или заполнения элемента. Таким образом, пока изображение не размножено ('background-repeat: repeat'), оно может быть невидимым.

Пример(ы):

Здесь создаётся бесконечная вертикальная полоса, остающаяся "приклеенной" к порту просмотра при прокручивании элемента.

BODY {
  background: red url("pendant.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

ПА могут рассматривать 'fixed' как 'scroll'. Однако рекомендуется, чтобы они интерпретировали 'fixed' корректно, хотя бы для элементов HTML и BODY, поскольку у автора нет способа предоставлять изображение только для тех браузеров, которые поддерживают 'fixed'. См. детали в разделе соответствие.

'background-position'
Значение:[ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
Начальное:0% 0%
Применяется: к элементам уровня блока и к замещаемым элементам
Наследуется:нет
Процентное:относится к размеру самого бокса
Носитель:визуальный

Если фоновое изображение специфицировано, то данное свойство определяет его (изображения) начальную позицию.
Значения имеют следующий смысл:

<percentage> <percentage>
Если пара значений - '0% 0%', то верхний левый угол изображения выровнен с левым верхним углом кромки заполнения бокса. Пара значений '100% 100%' помещает нижний правый угол изображения в нижний правый угол области заполнения. Если пара значений - '14% 84%', точка изображения 14% поперёк и 84% вниз помещается в точку 14% поперёк и 84% вниз области заполнения.
<length> <length>
Если пара значений - '2cm 2cm', то верхний левый угол изображения помещается на 2cm вправо и на 2cm вниз от верхнего левого угла области заполнения.
top left и left top
То же, что '0% 0%'.
top, top center и center top
То же, что '50% 0%'.
right top и top right
То же, что '100% 0%'.
left, left center и center left
То же, что '0% 50%'.
center и center center
То же, что '50% 50%'.
right, right center и center right
То же, что '100% 50%'.
bottom left и left bottom
То же, что '0% 100%'.
bottom, bottom center и center bottom
То же, что '50% 100%'.
bottom right и right bottom
То же, что '100% 100%'.

Если задано только одно значение, в процентах или единицах измерения, то оно устанавливает только горизонтальную позицию, вертикальная позиция будет 50%.
Если заданы два значения, первое задаёт горизонтальную позицию.
Допускаются комбинации значений в процентах и единицах измерения (например, '50% 2cm'). Допускаются негативные значения позиции. Ключевые слова не могут комбинироваться со значениями в процентах или единицах измерения (все возможные сочетания приведены выше).

Пример(ы):

BODY { background: url("banner.jpeg") right top }    /* 100%   0% */
BODY { background: url("banner.jpeg") top center }   /*  50%   0% */
BODY { background: url("banner.jpeg") center }       /*  50%  50% */
BODY { background: url("banner.jpeg") bottom }       /*  50% 100% */

Если фоновое изображение фиксировано в порте просмотра (см. свойство 'background-attachment'), то изображение размещается относительно порта просмотра, а не относительно области заполнения элемента. Например,

Пример(ы):

BODY {
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

В данном примере изображение (одиночное) размещается в правом верхнем углу порта просмотра.

'background'
Значение:[<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit
Начальное:не определено для сокращённых свойств
Применяется: ко всем элементам
Наследуется:нет
Процентное:разрешено для 'background-position'
Носитель:визуальный

Свойство 'background' это сокращённое свойство для установки индивидуальных свойств фона (т.е. 'background-color', 'background-image', 'background-repeat', 'background-attachment' и 'background-position') в одном месте в таблице стилей.

Свойство 'background' сначала устанавливает все индивидуальные свойства фона в их начальные значения, а затем назначает явные значения, заданные в объявлении.

Пример(ы):

В первом правиле задано только значение 'background-color' , а другие индивидуальные свойства установлены в свои начальные значения.
Во втором правиле все индивидуальные свойства специфицированы.

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }

14.3 Коррекция цветовой гаммы

По вопросам цветовой гаммы проконсультируйтесь в Gamma Tutorial в спецификации PNG ([PNG10]).

При вычислении коррекции цветовой гаммы, ПА, выводящие на CRT, могут принять идеальный CRT и игнорировать любые эффекты внедряемой гаммы. Это означает, что минимальная обработка, необходимая для текущей платформы - :

PC, использующий MS-Windows
none
Unix, использующий X11
none
Mac, использующий QuickDraw
применяет гамму 1.45 [ICC32] (приложения ColorSync-savvy могут просто передавать профиль sRGB ICC в ColorSync для выполнения необходимой коррекции цвета)
SGI, использующий X
применяет значения гаммы из /etc/config/system.glGammaVal (значение по умолчанию - 1.70; приложения, запущенные на Irix 6.2 или выше могут просто передавать профиль sRGB ICC в систему управления цветом)
NeXT, использующий NeXTStep
применяется гамма 2.22

"Применение гаммы" означает, что каждый из трёх - R, G и B - обязан быть конвертирован в R'=Rgamma, G'=Ggamma, B'=Bgamma, прежде чем быть обработанным ОС.

Это можно быстро выполнить путём однократного создания 256-элементной просмотровой таблицы при вызове браузера таким вот образом:

for i := 0 to 255 do
  raw := i / 255.0;
  corr := pow (raw, gamma);
  table[i] := trunc (0.5 + corr * 255.0)
end

что затем позволяет исключить необходимость чрезмерных вычислений для атрибута цвета, и ещё меньше - через пикселные значения.


Соответствие: требования и рекомендации

3 Соответствие: Требования и Рекомендации

Содержание

  • 3.1 Определения
  • 3.2 Соответствие
  • 3.3 Ошибочные условия
  • 3.4 Тип содержимого text/css

3.1 Определения

В этом разделе мы начинаем формальную спецификацию CSS2 с соглашения между авторами, пользователями и исполнителями.

Ключевые слова "ОБЯЗАН", "НЕ ОБЯЗАН", "НЕОБХОДИМ", "БУДЕТ", "НЕ БУДЕТ", "ДОЛЖЕН", "НЕ ДОЛЖЕН", "МОЖЕТ", "РЕКОМЕНДУЕТСЯ" И "НЕОБЯЗАТЕЛЕН" в этом документе интерпретируются так, как описано в [RFC2119].
Однако, для удобства чтения эти слова не употребляются в этой спецификации со всеми буквами в верхнем регистре.

Время от времени авторы этой спецификации дают практические рекомендации для авторов и пользовательских агентов (ПА). Эти рекомендации не являются нормативными и соответствие с этой спецификацией не зависит от их реализации. Эти рекомендации содержат выражения типа: "мы рекомендуем ...", "эта спецификация рекомендует ...", или другие подобные конструкции.

Таблица стилей
Набор операторов, специфицирующих представление документа.

Таблицы стилей могут иметь три различных источника: автор, пользователь и ПА. Взаимодействие этих источников описано в разделе Каскадирование и наследование.

Действующие таблицы стилей
Статус таблицы стилей зависит от уровня CSS, используемого в таблице стилей. Все действующие таблицы стилей CSS1 являются действующими и в CSS2. Однако некоторые изменения по сравнению с CSS1 указывают, что некоторые таблицы стилей CSS1 будут иметь несколько другую семантику в CSS2.

Действующая таблица стилей CSS2 обязана быть написана в соответствии с грамматикой CSS2. Кроме того, она обязана содержать только at-правила, названия свойств и значения свойств, определённые в данной спецификации. Неверное at-правило, название свойства или значение свойства - это то, которое имеет неверное значение.

Документ-источник
Документ, на который ссылается одна или более таблиц стилей. Он кодирован в том же языке, в котором документ представлен как дерево элементов. Каждый элемент состоит из имени, идентифицирующего тип элемента, нескольких необязательных атрибутов и (возможно пустого) содержимого.
Язык документа
Язык кодировки документа-источника (например, HTML или XML).
Элемент
(Термин SGML, см. [ISO8879].) Первичные синтаксические конструкции языка документа. Большинство правил таблиц стилей CSS используют имена элементов (такие как "P", "TABLE" и "OL" в HTML) для спецификации информации для их представления.
Замещаемый элемент
Элемент, для которого форматировщик CSS знает только внутренние размеры. В HTML элементы IMG, INPUT, TEXTAREA, SELECT и OBJECT можно привести в качестве примеров таких элементов. Например, содержимое элемента IMG часто замещается изображением, на которое указывает атрибут "src". CSS не определяет, как находить внутренние размеры.
Внутренние размеры
Ширина и высота, определённые самим элементом, а не его окружением. В CSS2 принято, что все замещаемые элементы - и только замещаемые элементы - появляются с внутренними размерами.
Атрибут
Значение, ассоциированное с элементом, состоящее из названия и ассоциированного значения.
Содержимое
Содержимое, ассоциированное с элементом в документе-источнике; не все элементы имеют содержимое, и в этом случае они называются пустыми. Содержимое элемента может быть текстом и может включать несколько субэлементов, тогда такой элемент называется родительским (элементом-предком) для субэлементов.
Выводимое содержимое
Содержимое элемента после вывода, которое представляется в соответствии с подключённой таблицей стилей. Выводимое содержимое замещаемых элементов поступает извне документа-источника. Выводимое содержимое может быть также альтернативным текстом для данного элемента (например, значением атрибута "alt" в HTML) и может включать объекты, вставленные, явно или неявно, таблицей стилей: маркировка или нумерация списков и т.п.
Дерево документа
Дерево элементов, кодированных в документе-источнике. Каждый элемент в этом дереве имеет только одного предка, за исключением элемента root, который предков не имеет.
Дочерний элемент
Элемент А называется дочерним элементом элемента В, если только В является родителем А.
Потомок
Элемент А называется потомком элемента В, если (1) А является дочерним по отношению к В, или (2) если А является дочерним относительно элемента С, который является потомком В.
Предок (родительский элемент)
Элемент А называется предком элемента В, если, и только если, В является потомком А.
Родственник
Элемент А называется родственником элемента В, если, и только если, В и А имеют одного общего предка.
Элемент А является предшествующим родственником, если появляется перед В в дереве документа.
Элемент В является последующим родственником, если появляется после А в дереве документа.
Предшествующий элемент
Элемент А называется предшествующим элементу В, если, и только если, (1) А является предком В или (2) А является предшествующим родственником В.
Последующий элемент
Элемент А называется последующим элементом для В, если, и только если, В является предшествующим элементом для А.
Автор
Тот, кто пишет документы и ассоциированные таблицы стилей.
Авторская утилита генерирует документы и ассоциированные таблицы стилей.
Пользователь
Тот, кто взаимодействует с пользовательским агентом (ПА) для просмотра, прослушивания или другого использования документа и ассоциированной таблицы стилей. Пользователь может предоставлять персональную таблицу стилей, которая кодирует персональные установки-предпочтения.
Пользовательский агент (ПА)
Это какая-либо программа, интерпретирующая документ, написанный на определённом языке документов, и ассоциированную с ним таблицу стилей в соответствии с терминами данной спецификации. ПА может отображать документ, "читать" его вслух, распечатывать его, конвертировать его в другой формат и т.п.

Это пример документа-источника, кодированного в HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <TITLE>My home page</TITLE>
  <BODY>
    <H1>My home page</H1>
    <P>Welcome to my home page! Let me tell you about my favorite
        composers:
    <UL>
      <LI> Elvis Costello
      <LI> Johannes Brahms
      <LI> Georges Brassens
    </UL>
  </BODY>
</HTML>

Это дерево данного документа:

Sample document tree [D]

В соответствии с определением HTML, элементы HEAD будут вставлены во время разбора и станут частью дерева документа, даже если тэги HEAD отсутствовали в документе-источнике. Таким же образом, разборщик "знает", где заканчиваются элементы P и LI, даже если они не имеют тэгов </P> и </LI> в источнике.

3.2 Соответствие

Этот раздел определяет соответствие только со спецификацией CSS2.
В будущем могут появиться другие уровни CSS, что может потребовать в будущем от ПА выполнения другого набора свойств, чтобы соответствовать.

В общем, следующие пункты обязательно должны учитываться ПА, претендующим на соответствие данной спецификации:

  1. Он обязан поддерживать один или более типов носителя CSS2.
  2. Для каждого документа-источника он обязан запросить все ассоциированные таблицы стилей, подходящие для поддерживаемых типов носителя.
    Если он не может запросить все ассоциированные таблицы стилей (к примеру, из-за ошибок в сети), он обязан вывести документ с использованием тех таблиц, которые он может запросить.
  3. Он обязан разобрать таблицы стилей в соответствии с данной спецификацией.
    В частности, он обязан распознавать все at-правила, блоки, объявления и селекторы (см. грамматику CSS2).
    Если ПА обнаруживает свойство, применимое к поддерживаемому типу носителя, то ПА обязан разобрать значение в соответствии с определением свойства. Это значит, что ПА обязан принять все верные значения и игнорировать объявления с неверными значениями. ПА обязаны игнорировать правила, применяемые к неподдерживаемым типам носителя.
  4. В каждом элементе дерева документа ПА обязан назначить значение для каждого применимого свойства в соответствии с определением свойства и с правилами каскадирования и наследования.
  5. Если документ-источник поступает с альтернативными таблицами стилей (как с ключевым словом "alternate" в HTML 4.0 [HTML40]), ПА обязан предоставить пользователю возможность выбрать одну из нескольких таблиц стилей и применить её.

Не каждый ПА обязан следовать всем пунктам, однако:

  • ПА, который вводит таблицы стилей, обязан следовать пунктам 1 - 3.
  • Авторская утилита должна только производить действующие таблицы стилей
  • ПА, который выводит документ с ассоциированными таблицами стилей, обязан следовать пунктам 1 - 5 и представлять документ в соответствии со специфическими требованиями носителя, установленными далее в этой спецификации. Значения при необходимости могут быть приближены ПАгентом.

Невозможность для ПА выполнить часть данной спецификации из-за ограничений конкретного устройства (например, ПА не может вывести цвета на монохромном мониторе) не означает несоответствие.

Данная спецификация рекомендует, чтобы ПА позволял пользователю специфицировать пользовательские таблицы стилей.

3.3 Ошибочные условия

В общем, данный документ не специфицирует для ПА поведение при обработке ошибок (например, как ПА ведут себя, если не могут найти ресурс, указанный в URI).

Однако ПА обязаны соблюдать правила обработки ошибок разбора.

Поскольку ПА могут различаться в способах обработки ошибочных условий, авторы и пользователи не обязаны полагаться на специфическое поведение при обработке ошибок.

3.4 Тип содержимого text/css

Таблицы стилей CSS, находящиеся во внешнем файле, пересылаются по Internet как последовательность байтов, сопровождаемая информацией о кодировании (см. [HTML40], гл. 5). Структура переноса, называемая сущность сообщения, определена в RFC 2045 и RFC 2068 (см. [RFC2045] и [RFC2068]).
Сущность сообщения вместе с типом содержимого "text/css" представляет независимый документ CSS. Тип содержимого "text/css" был зарегистрирован в RFC 2138 ([RFC2318]).


Полное описание примера, иллюстрирующего скрытые внутренние рамки

На этой диаграмме показано, как использовать правила приоритета для получения эффекта скрытых внутренних рамок.

Две таблицы окружены толстыми рамками. Спецификация таблиц HTML и правила стиля для данного изображения вызывают исчезновение вертикальной линии между двумя ячейками в первом ряду и горизонтальной линии между двумя ячейками в первом столбце.


Индекс дескрипторов

Приложение G. Индекс дескрипторов

Название | Значения | Начальное значение
'ascent' | <number> | не определено
'baseline' | <number> | 0
'bbox' | <number>, <number>, <number>, <number> | не определено
'cap-height' | <number> | не определено
'centerline' | <number> | не определено
'definition-src' | <uri> | не определено
'descent' | <number> | не определено
'font-family' | [ <family-name> | <generic-family> ] [, [<family-name> | <generic-family> ]]* | зависит от пользовательского агента
'font-size' | all | <length> [, <length>]* | all
'font-stretch' | all | [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded ] [, [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded] ]* | normal
'font-style' | all | [ normal | italic | oblique ] [, [normal | italic | oblique] ]* | all
'font-variant' | [normal | small-caps] [,[normal | small-caps]]* | normal
'font-weight' | all | [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900] [, [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]]* | all
'mathline' | <number> | не определено
'panose-1' | [<integer>]{10} | 0 0 0 0 0 0 0 0 0 0
'slope' | <number> | 0
'src' | [ <uri> [format(<string> [, <string>]*)] | <font-face-name> ] [, <uri> [format(<string> [, <string>]*)] | <font-face-name> ]* | не определено
'stemh' | <number> | не определено
'stemv' | <number> | не определено
'topline' | <number> | не определено
'unicode-range' | <urange> [, <urange>]* | U+0-7FFFFFFF
'units-per-em' | <number> | не определено
'widths' | [<urange> ]? [<number> ]+ [,[<urange> ]? <number> ]+] | не определено
'x-height' | <number> | не определено


Полное описание диаграммы примера дерева документа

На диаграмме показан пример дерева документа.

Корневой узел (HTML) находится вверху. У него два дочерних элемента: HEAD и BODY. У HEAD имеется дочерний элемент: TITLE. У BODY имеется три дочерних элемента: H1, P и UL. В UL есть три узла LI.

Если представить это в виде каскада, то каждая . будет означать дополнительный уровень, что даст:

HTML
.HEAD
..TITLE
.BODY
..H1
..P
..UL
...LI
...LI
...LI


Полное описание примера оттенения текста

На диаграмме показано, как можно использовать оттенение текста для создания эффекта "затмения."

Строка "ECLIPSE" выведена белыми заглавными буквами. Каждая буква окружена тенью, распространяющейся во все стороны от буквы.


Полное описание примера пунктуации и зависающей заглавной буквы

Диаграмма показывает создание "зависающей" заглавной букв с использованием псевдокласса :first-letter. Однако, в отличие от предыдущей диаграммы, текст начинается со знака пунктуации (кавычки).

Имеются 5 строк текста. Первая строка начинается с большой двойной кавычки ("), за которой идёт большая заглавная курсивная буква "A", занимающая три строки (по вертикали). Остальной текст обтекает вокруг "A": первые три строки находятся справа от неё, а две последние - снизу (выровненные слева по знаку кавычки).

В следующей схеме элемента PRE пространство, занимаемое "A" во второй и третьей строках, представлено символами подчёркивания (_):

"   A bird in
   __ the hand
  ___ is worth
two in the bush,"
says an old proverb.


Полное описание примера зависающей заглавной буквы.

Диаграмма иллюстрирует "зависающую" заглавную букву, полученную с использованием псевдокласса :first-letter.

Имеются 4 строки текста. Первая строка начинается заглавной буквой "T", занимающей две строки (по вертикали). Остальная часть текста обтекает вокруг "T": первые две строки - справа, а третья и четвёртая - снизу (выровненные слева по букве "T").

В следующем представлении в элементе PRE пространство, занимаемое "T" в начале второй строки, представлено символом подчёркивания (_):

T he first few
_ words of an
article in the
Economist


Полное описание примера перекрывания поплавком элементов с нормальным расположением

Полное описание перекрывания поплавком элементов с нормальным расположением

На диаграмме показано изображение-поплавок, перекрывающее рамки двух параграфов с нормальным расположением: рамки параграфов закрыты непрозрачными частями изображения.

Имеется два параграфа с нормальным расположением, каждый окружён красной рамкой. Всплывающее влево изображение заставляет последние три строки верхнего параграфа обтекать по правой стороне. Оно заставляет три первые строки следующего параграфа делать то же самое, а остальная часть параграфа расположена нормально.

Рамки параграфов просвечивают сквозь область полей бокса-поплавка, но непрозрачная часть области содержимого изображения-поплавка зарывает их.


Полное описание примера того, как поплавки перекрывают боксы с нормальным расположением

Полное описание примера перекрывания поплавками боксов с нормальным расположением

Диаграмма иллюстрирует, как всплывающее изображение (поплавок) перекрывает рамки параграфа с нормальным расположением: рамки параграфа закрыты непрозрачными частями изображения. Второй параграф вытолкнут ниже поплавка свойством 'clear'.

Имеется два параграфа с нормальным расположением, каждый окружён красной рамкой. Всплывающее влево изображение заставляет последние три строки верхнего параграфа обтекать поплавок справа. Рамки параграфа просвечивают сквозь область полей поплавка, но непрозрачная часть области содержимого изображения-поплавка зарывает их.

Второй параграф расположен нормально, начинаясь под нижним полем изображения. Верхнее поле второго параграфа растянуто вверх по направлению к нижнему полю предыдущего параграфа.


Полное описание примера поплавка и обтекания текста

Диаграмма иллюстрирует, как текст обтекает вокруг поплавка, и особенно - как строчные боксы содержимого рядом с поплавком укорачиваются, чтобы дать пространство для бокса поплавка (включая поля). Код HTML в примере предшествует изображению. В документе-источнике элемент BODY содержит P, который содержит всплывающий влево IMG.

Вверху иллюстрации написано "max (BODY margin, P margin)", чтобы обозначить сжатие горизонтальных полей. Однако поле IMG'а не участвует в этом расчёте, поскольку IMG всплывает.

В левой части иллюстрации левые поля элементов BODY, P и IMG не сжимаются (вертикальные поля не сжимаются).

Текст параграфа обтекает IMG справа, начиная от сверху и справа от его (IMG) правого поля. Когда текст достигает нижнего поля IMG, он продолжает выводиться нормально, как в элементе P. Таким образом, строчные боксы вдоль вертикали поплавка укорочены.


Полное описание примера, иллюстрирующего позиционирование относительно позионированного предка

Полное описание примера, иллюстрирующего позиционирование относительно позиционированного предка

Диаграмма иллюстрирует абсолютное позиционирование бокса ("inner") относительно содержащего блока, установленного относительно позиционированным предком ("outer").

Изображено окно документа с 8 строками (пронумерованными от 1 до 8), каждая высотой 24px. Весь текст body и "outer" расположен в строках 1, 2 и 3. Бокс "inner" позиционирован относительно верхнего и левого краёв первого инлайн-бокса элемента "outer".

В следующем элементе PRE каждая строка в 24 пикселов симулируется двумя строками, имеющими соответствующий номер. Соответствующие края позиционирования бокса "inner" обозначены на диаграмме толстым пунктиром. Верхние левые координаты бокса "inner" обозначены (+200, -100). В элементе PRE ниже, соответствующие "inner" края обозначены вертикальными линиями и знаками =. Смещение бокса "inner" задано в квадратных скобках. Строки, как они выведены в изображении, содержат:

                        ====
                             |
1 Beginning of body contents.|Start

2 of outer contents. End of outer

3 contents. End of body contents.

4          [(+200, -100)]

5                Inner

6                contents.

7

8

По умолчанию цвет текста - чёрный. "Start of outer contents" -красный. "Inner contents" - голубой. "End of outer contents" - красный.


Полное описание примера, иллюстрирующего абсолютное позиционирование

Диаграмма показывает действие абсолютного позиционирования бокса.

Изображено окно документа с 8 строками (пронумерованными от 1 до 8), каждая высотой 24px. Весь текст вне бокса "outer" расположен в строках 1 и 2.

Бокс "outer" позиционирован абсолютно и занимает нижнюю правую четверть окна документа. Весь текст в "outer" и его потомках занимает вторую половину строк с 5 по 8.

В следующем элементе PRE каждая строка в 24 пикселов симулируется двумя строками, имеющими соответствующий номер. Строки, как они выведены в изображении, содержат:

1 Beginning of body contents. End of

2 body contents.

3

4

5                Start of outer

6                contents. Inner

7                contents. End of

8                outer contents.

По умолчанию цвет текста - чёрный. "Start of outer contents" -красный. "Inner contents" - голубой. "End of outer contents" - красный.


Полное описание примера всплывания с 'clear'

На этой диаграмме показан всплывающий бокс ("inner") и как его "родственники" выталкиваются вниз при использовании свойства 'clear'.

Изображено окно документа с 8 строками (пронумерованными 1 до 8), каждая по 24px высотой. Текст перед боксом "inner" обтекает в первой и в половине второй строки. Бокс "inner" всплывает вправо и занимает вторую половину строк 3 и 4. Бокс-родственник расположен на следующей (4) строке, а после него идёт остальной текст.

В следующем элементе PRE каждая строка в 24 пикселов симулируется двумя строками, которые пронумерованы. Вертикальная черта обозначает левый край всплывающего бокса. Строки изображения содержат:

1 Beginning of body contents. Start

2 of outer contents.     | Inner

3                        | contents.

4 Sibling contents. End of outer

5 contents. End of body contents.

По умолчанию цвет текста - чёрный. "Start of outer contents" -красный. "Inner contents" - голубой. "Sibling contents" - красный. "End of outer contents" - красный.


Полное описание примера, иллюстрирующего всплывание без 'clear'

Полное описание примера всплывания без использования 'clear'

На диаграмме показан всплывающий бокс ("inner") и то, как его "родственники" обтекают вокруг него.

Показано окно документа из 8 строк (пронумерованных от 1 до 8) по 24px высотой каждая. Поскольку бокс "inner" всплыл вправо, весь остальной текст обтекает вокруг него, включая текст "родственного" бокса (на строках с 1 по 5).

В следующем элементе PRE каждая строка в 24 пикселов симулируется двумя строками, которые пронумерованы. Вертикальная черта обозначает левый край всплывающего бокса. Строки изображения содержат:

1 Beginning of body contents. Start

2 of outer contents.     | Inner

3 Sibling contents. End  | contents.

4 of outer contents. End of body

5 contents.

По умолчанию цвет текста - чёрный. "Start of outer contents" -красный. "Inner contents" - голубой. "Sibling contents" - красный. "End of outer contents" - красный.


Полное описание примера всплывания

Полное описание примера, иллюстрирующего всплывание

На диаграмме показан всплывающий бокс.

Показано окно документа из 8 строк (пронумерованных от 1 до 8) по 24px высотой каждая . Поскольку бокс "inner" всплыл вправо, весь остальной текст обтекает вокруг него (на строках с 1 по 4).

В следующем элементе PRE каждая строка в 24 пикселов симулируется двумя строками, которые пронумерованы. Вертикальная черта обозначает левый край всплывающего бокса. Строки изображения содержат:

1 Beginning of body contents. Start

2 of outer contents. End | Inner

3 of outer contents. End | contents.

4 of body contents.

По умолчанию цвет текста - чёрный. "Start of outer contents" -красный. "Inner contents" - голубой. "End of outer contents" - красный.


Полное описание примера нормального расположения

На диаграмме показано нормальное расположение текста между родительским и родственным боксами.

Показано окно документа из 8 строк (пронумерованных от 1 до 8) по 24px высотой каждая. Выведено 4 строки текста, занимающие строчки с 1по 4.

В следующем элементе PRE каждая строка в 24 пикселов симулируется двумя строками, которые пронумерованы. Вертикальная черта обозначает левый край всплывающего бокса. Строки изображения содержат:

1 Beginning of body contents. Start

2 of outer contents. Inner contents.

3 End of outer contents. End of body

4 contents.

По умолчанию цвет текста - чёрный. "Start of outer contents" -красный. "Inner contents" - голубой. "End of outer contents" - красный.


Полное описание примера относительного позиционирования

На диаграмме показано действие относительного позиционирования.

Показано окно документа из 8 строк (пронумерованных от 1 до 8) по 24px высотой каждая. Текст бокса "outer" (с конца строки 1 до половины строки 2, и частично на строке 3) сдвинут вверх на 12px. Текст бокса "inner", хотя и сдвинут также вверх, позиционирован относительно таким образом, что расположен что расположен своей нормальной позиции с конца строки 2.

В следующем элементе PRE каждая строка в 24 пикселов симулируется двумя строками, которые пронумерованы. Вертикальная черта обозначает левый край всплывающего бокса. Строки изображения содержат:

                             Start
1 Beginning of body contents.

2 of outer contents.
                     Inner contents.
3
  End of outer contents.
4                    End of body

5 contents.

По умолчанию цвет текста - чёрный. "Start of outer contents" -красный. "Inner contents" - голубой. "End of outer contents" - красный.


Полное описание примера абсолютного позиционирования относительно начального содержащего блока

На диаграмме показано действие абсолютного позиционирования относительно начального содержащего блока.

Показано окно документа из 8 строк (пронумерованных от 1 до 8) по 24px высотой каждая. Весь текст body и "outer" расположен на строках 1, 2 и 3. Бокс "inner" позиционирован "-100, 200" относительно координат "0, 0" (левого верхнего угла окна документа). Большая часть содержимого бокса "inner" поэтому размещена за пределами окна документа.

В следующем элементе PRE каждая строка в 24 пикселов симулируется двумя строками, которые пронумерованы. Текст слева от номеров строк находится за пределами начального содержащего блока. Строки изображения содержат примерно следующее:

      1 Beginning of body contents. [@]Start

      2 of outer contents. End of outer

      3 contents. End of body contents.

      4

Inner 5

Conte 6 nts

      7

      8

По умолчанию цвет текста - чёрный. "Start of outer contents" -красный. "Inner contents" - голубой. "End of outer contents" - красный.


Шрифты

15 Шрифты

Содержание

  • 15.1 Введение
  • 15.2 Спецификация шрифта
    • 15.2.1 Свойства спецификации шрифта
    • 15.2.2 Семейство шрифтов: свойство 'font-family'
    • 15.2.3 Стилизация шрифта: свойства 'font-style', 'font-variant', 'font-weight' и 'font-stretch'
    • 15.2.4 Размер шрифта: свойства 'font-size' и 'font-size-adjust'
    • 15.2.5 Сокращение для свойств шрифта: свойство 'font'
    • 15.2.6 Общие (родовые) семейства шрифтов
      • serif
      • sans-serif
      • cursive
      • fantasy
      • monospace
  • 15.3 Выбор шрифта
    • 15.3.1 Описание шрифта и @font-face
    • 15.3.2 Дескрипторы для подбора шрифта: 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-stretch' и 'font-size'
    • 15.3.3 Дескрипторы для квалификации данных шрифта: 'unicode-range'
    • 15.3.4 Дескрипторы числовых значений: 'units-per-em'
    • 15.3.5 Дескриптор для ссылки: 'src'
    • 15.3.6 Дескрипторы подбора: 'panose-1', 'stemv', 'stemh', 'slope', 'cap-height', 'x-height', 'ascent' и 'descent'
    • 15.3.7 Дескрипторы синтеза: 'widths', 'bbox' и 'definition-src'
    • 15.3.8 Дескрипторы выравнивания: 'baseline', 'centerline', 'mathline' и 'topline'
    • 15.3.9 Примеры
  • 15.4 Характеристики шрифта
    • 15.4.1 Введение
    • 15.4.2 Полное имя шрифта
    • 15.4.3 Единицы измерения em-квадрата
    • 15.4.4 Центральная базовая линия
    • 15.4.5 Кодировка шрифта
    • 15.4.6 Имя семейства шрифта
    • 15.4.7 Ширина глифов
    • 15.4.8 Ширина горизонтальной основы
    • 15.4.9 Высота глифов верхнего регистра
    • 15.4.10 Высота глифов нижнего регистра
    • 15.4.11 Нижняя базовая линия
    • 15.4.12 Математическая базовая линия
    • 15.4.13 Максимальный ограничивающий бокс
    • 15.4.14 Максимальная неакцентированная высота
    • 15.4.15 Максимальная неакцентированная глубина
    • 15.4.16 Число Panose -1
    • 15.4.17 Диапазон символов ISO 10646
    • 15.4.18 Верхняя базовая линия
    • 15.4.19 Ширина вертикальной основы
    • 15.4.20 Угол вертикального наклона
  • 15.5 Алгоритм совпадения шрифтов
    • 15.5.1 Отображение значений ширины шрифтов в имена шрифтов
    • 15.5.2 Примеры совпадения шрифтов

15.1 Введение

Если текст документа отображается визуально, символы (абстрактные информационные элементы) обязаны отображаться абстрактными глифами. Один или более символов могут изображаться одним или более абстрактными глифами в доступном контекстно-зависимом стиле.
Глиф - это фактическое художественное представление абстрактного глифа в некоторых типографских стилях в векторной или растровой форме, которое может быть прорисовано на экране или на бумаге.
Шрифт - это набор глифов, соблюдающих один базовый мотив в соответствии с дизайном, размером, внешним видом и другими атрибутами, ассоциированными со всем набором, и отображение из символов в абстрактные глифы.

Визуальный пользовательский агент (ПА) обязан рассматривать следующие вопросы, прежде чем отображать символы:

  • Имеется ли, прямо или наследуемо, шрифт, специфицированный для данного символа?
  • Доступен ли этот шрифт для ПА?
  • Если это так, какой глиф(ы) отображает этот символ или последовательность символов?
  • Если нет, что нужно сделать? Подставлять ли другой шрифт? Может ли шрифт быть синтезирован? Может ли он быть получен из Web?

И в CSS1, и в CSS2 авторы специфицируют характеристики шрифта в серии свойств.

То, как ПА обрабатывают свойства, если нет совпадения шрифта на стороне клиента, было расширено в CS2 по сравнению с CSS1. В CSS1 принималось, что все шрифты представлены в клиентской системе и идентифицируются исключительно по имени. Альтернативные шрифты могли быть специфицированы через свойства, но в то же время у ПА не было способа предложить пользователю какие-либо другие шрифты (даже стилистически подобные шрифты, которые были доступны ПА), кроме общих шрифтов по умолчанию.

В CSS2 всё это изменилось, и теперь появилось больше свободы:

  • для авторов таблиц стилей: описывать необходимые шрифты;
  • для пользовательских агентов: в выборе шрифтов, если затребованный авторами шрифт непосредственно не доступен.

CSS2 улучшает подбор шрифтов на стороне клиента, делает возможным синтезирование шрифта и прогрессирующее отображение, а также загрузку шрифтов из Web. Это улучшает возможности 'WebFonts'.

В шрифтовой модели CSS2, как и в CSS1, каждый ПА имеет в своём распоряжении базу данных (БД) шрифтов.
CSS1 ссылалось на эту БД, но не предоставляло детальной информации о том, что в БД находится.
CSS2 определяет информацию в этой БД и позволяет авторам таблиц стилей работать в ней. При запросе на отображение символа определённого шрифта, ПА сначала идентифицирует тот шрифт БД, который "наиболее соответствует" специфицированному шрифту (в соответствии с алгоритмом совпадения шрифтов). После идентификации шрифта, ПА запрашивает данные шрифта локально или из Web и может вывести символ с использованием соответствующих глифов.

В соответствии с этой моделью мы организовали данную спецификацию по двум разделам. Первый касается механизма спецификации шрифта, посредством которого авторы специфицируют, какой шрифт они хотели бы использовать. Второй касается механизма выбора шрифта, посредством которого клиентский ПА идентифицирует и загружает шрифт, наиболее соответствующий спецификации автора.

То, как ПА конструирует базу шрифтов, находится вне поля зрения данной спецификации, поскольку реализация БД зависит от таких факторов, как операционная система, система окон и клиент.

15.2 Спецификация шрифта

Первая фаза механизма шрифтов CSS рассматривает, как авторы таблиц стилей специфицируют, какие шрифты должны использоваться ПА. Во-первых очевидно, что можно специфицировать шрифт по имени - строке, разделённой на части, например, "BT Swiss 721 Heavy Italic".

К сожалению, не существует общепринятой хорошо проработанной и универсальной системы классификации шрифтов по их именам, и терминология, применимая к именам одного семейства шрифтов, может не подходить для других. Например, термин 'italic' обычно используется для обозначения наклонного текста, но наклонный текст может также обозначаться Oblique, Slanted, Incline, Cursive или Kursiv.
Имена шрифтов обычно содержат термины, описывающие "вес" шрифта. Главной задачей этих имён является различение шрифтов одного семейства по толщине. По этим именам не существует общепринятых значений для указания толщины, и использование этих значений может очень различаться. Например, утолщённый шрифт может описываться как Regular, Roman, Book, Medium, Semi- или Demi-Bold, Bold или Black, в зависимости от того, насколько чёрным является "нормальный" шрифт.

Этот недостаток систематизации имён делает невозможным, в общем случае, генерацию модифицированного имени шрифта, отличающегося определёнными признаками, такими как "жирность".

В связи с этим CSS использует другую модель. Шрифты запрашиваются не по имени, а по серии установленных свойств шрифта. Значения этих свойств формируют базис для механизма выбора шрифта в ПА. Свойства шрифта могут модифицироваться по отдельности, например, для увеличения толщины, и новый набор значений свойств шрифта используется затем для выбора из БД шрифтов. В результате повышается надёжность работы авторов и разработчиков таблиц стилей.

15.2.1 Свойства спецификации шрифта

CSS2 специфицирует шрифты в соответствии со следующими характеристиками:

Семейство шрифта/Font Family
Свойство Семейство шрифта специфицирует, какое семейство шрифтов используется для вывода текста. Семейство это группа шрифтов, созданных с использованием сходных принципов дизайна и внешнего вида. Один член семейства может быть italic, другой bold, третий - сжатый или использующий малые заглавные. Имена семейств включают "Helvetica", "New Century Schoolbook", и "Kyokasho ICA L". Имена семейств не ограничены латиницей. Имена семейств могут быть сгруппированы по различным категориям: без или с засечками, с непропорциональными символами, симулирующие письмо от руки, фантазийные шрифты и т.д.
Стиль шрифта/Font style
Специфицирует, отображается ли текст нормальным, italic или наклонным. Italic - это более курсивный шрифт, чем normal, но не такой курсивный, чтобы отображать письмо от руки. Oblique - это наклонная форма шрифта normal, и обычно используется вместе со шрифтами sans-serif. Такое определение устраняет путаницу, когда слегка наклонённые шрифты normal обозначают как oblique, а normal Greek - как italic.
Вариант шрифта/Font variant
Обозначает, выводится ли текст нормальными или малыми заглавными глифами для символов нижнего регистра. Обычно шрифт содержит только normal, только малые заглавные или глифы обоих типов; это свойство используется для запроса соответствующего шрифта и, если шрифт содержит оба варианта, подходящего глифа.
Вес шрифта/Font weight
Вес шрифта имеет отношение к толщине глифов, используемых для вывода текста, относительно других шрифтов того же семейства.
Сжатие/Font stretch
Обозначает величину сжатия или расширения глифов, используемых для вывода текста, относительно других шрифтов того же семейства.
Размер/Font size
Относится к размеру шрифта от базовой линии, когда установлен в solid (в терминах CSS это тогда, когда свойства 'font-size' и 'line-height' имеют одно значение).

Для всех свойств, за исключением 'font-size', значения размеров 'em' и 'ex' относятся к размеру шрифта текущего элемента. Для 'font-size' эти единицы измерения ссылаются на размер шрифта-предка. См. также раздел единицы измерения.

Свойства шрифта в CSS используются для описания желаемого вида текста документа. Дескрипторы шрифта, напротив, используются для описания характеристик шрифта, чтобы мог быть выбран походящий шрифт для создания нужного представления.
О классификации шрифтов см. раздел дескрипторы шрифта.

15.2.2 Семейство шрифтов: свойство 'font-family'

'font-family'
Значение: [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit
Начальное: зависит от ПА
Применяется: ко всем элементам
Наследуется:да
Процентное: N/A
Носитель: визуальный

Это свойство специфицирует приоритетный список имён семейств шрифтов и/или названий родовых семейств. Для решения проблем отсутствия в одном конкретном шрифте глифов для отображения всех символов документа или недоступности конкретных шрифтов в конкретной системе, данное свойство позволяет авторам специфицировать список шрифтов одного и того же стиля и размера, которые (шрифты) рассматриваются последовательно, чтобы определить, содержат ли они глиф конкретного символа. Это называется набор шрифтов.

Пример(ы):

Например, для отображения текста, содержащего смесь английских и математических символов, может потребоваться набор из двух шрифтов: один с латинскими символами и цифрами, другой - с математическими символами. Вот пример набора шрифтов, подходящих для отображения текста, содержащего латинские, японские и математические символы:

BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }

Латинские символы будут взяты из шрифта "Baskerville", японские глифы - из "Heisi Mincho W3", а глифы математических символов - из "Symbol". Все другие будут браться из общего семейства шрифтов 'serif'.

Общие семейства шрифтов используются, если один или более шрифтов из набора шрифтов недоступны. Хотя во многих шрифтах есть глиф "отсутствующий символ", обычно это пустой квадрат, он как правило не выводится, если только это не последний шрифт набора шрифтов.

Есть два типа имён семейств шрифтов:

<family-name>/Имя семейства
Имя семейства шрифтов по выбору. В предыдущем примере "Baskerville", "Heisi Mincho W3" и "Symbol" являются семействами шрифтов. Имена семейств шрифтов, содержащие пробелы, должны заключаться в кавычки. Если кавычки отсутствуют, любые символы пробела до и после имени шрифта игнорируются, а любая последовательность пробелов внутри имени шрифта конвертируется в одиночный пробел.
<generic-family>/Родовое (общее) семейство
Определены следующие родовые семейства: 'serif', 'sans-serif', 'cursive', 'fantasy' и 'monospace'. См. описание этих семейств в разделе родовые семейства шрифтов. Имена родовых семейств являются ключевыми словами и не обязательно должны заключаться в кавычки.

Авторам рекомендуется предлагать родовое семейство шрифтов в качестве последней альтернативы, для надёжности.

Например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Font test</TITLE>
    <STYLE type="text/css">
      BODY { font-family: "new century schoolbook", serif }
    </STYLE>
  </HEAD>
  <BODY>
   <H1 style="font-family: 'My own font', fantasy">Test</H1>
    <P>What's up, Doc?
  </BODY>
</HTML>

Пример(ы):

Обогащённый синтаксис выбора в CSS2 можно использовать для создания печати, чувствительной к языку. Например, некоторые китайские и японские символы унифицированы для того, чтобы использовать одну и ту же точку кода в Unicode, хотя абстрактные глифы - разные в этих двух языках.

*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif }
*:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif }

Здесь выбирается любой элемент соответствующего языка - японского или традиционного китайского - и запрашивается соответствующий шрифт.

15.2.3 Стилизация шрифта: свойства 'font-style', 'font-variant', 'font-weight' и 'font-stretch'

'font-style'
Значение: normal | italic | oblique | inherit
Начальное:normal
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A (не установлено)
Носитель:визуальный

Свойство 'font-style' запрашивает стили normal (иногда называемый "roman" или "upright"), italic и oblique в семействе шрифтов. Значения имеют следующий смысл:

normal
Определяет шрифт, который классифицирован как 'normal' в БД шрифтов ПА.
oblique
Определяет шрифт, который классифицирован как 'oblique' в БД шрифтов в ПА. Шрифты со словами Oblique, Slanted или Incline в своих названиях обычно помечаются в БД шрифтов как 'oblique'. Шрифт, помеченный в БД шрифтов ПА как 'oblique', может в действительности генерироваться электронным наклоном нормального шрифта.
italic
Определяет шрифт, который классифицирован как 'italic' в БД шрифтов ПА, или, если это недоступно, шрифт, помеченный 'oblique'. Шрифты со словами Italic, Cursive или Kursiv в своих названиях обычно помечаются как 'italic'.

Пример(ы):

В этом примере текст normal в элементах H1, H2 или H3 будет отображаться шрифтом italic. Однако, выделенный текст (EM) в элементе H1 будет выведен как normal.

H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
'font-variant'
Значение: normal | small-caps | inherit
Начальное:normal
Применяется:ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:визуальный

В шрифтах малых заглавных букв глифы символов нижнего регистра походят на символы верхнего регистра, но меньшего размера и слегка других пропорций. Свойство 'font-variant' запрашивает двухкамерный шрифт (имеющий два регистра, как в латинице). Это свойство не имеет видимого эффекта для однокамерного написания (когда имеется только один регистр, как в большинстве систем написания). Значения имеют следующий смысл:

normal
Специфицирует шрифт, который не помечен как шрифт малых заглавных букв.
small-caps
Специфицирует шрифт, который помечен как шрифт малых заглавных букв. Если конкретный шрифт малых заглавных букв недоступен, ПА должны симулировать такой шрифт, например, замещением букв нижнего регистра обычного шрифта пересчитанными символами верхнего регистра. В крайнем случае, глифы непересчитанных букв верхнего регистра шрифта normal могут замещать глифы шрифта малых заглавных букв, и весь текст выводится символами верхнего регистра.

Пример(ы):

Результатом следующего примера будет элемент H3 с малыми заглавными буквами, с выделенными словами (EM) из наклонённых малых заглавных:

H3 { font-variant: small-caps }
EM { font-style: oblique }

Поскольку это свойство переводит символы текста в верхний регистр, применяется тот же подход, что и в text-transform'.

'font-weight'
Значение:normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Начальное:normal
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:визуальный

Свойство 'font-weight' специфицирует вес шрифта. Значения имеют следующий смысл:

от 100 до 900
Эти значения формируют упорядоченную последовательность, где каждый номер обозначает вес, который темнее своего предшественника.
normal
То же, что '400'.
bold
То же, что '700'.
bolder
Определяет вес шрифта, более тёмный, чем наследуемый. Если такого веса нет, результатом будет более "тёмное" числовое значение (а шрифт не изменяется), если только наследуемое значение не '900', в этом случае результат будет также '900'.
lighter
Определяет вес шрифта, назначаемый шрифту, который светлее, чем наследуемый. Если такого веса нет, результатом будет более "светлое" числовое значение (а шрифт не изменяется), если только наследуемое значение не '100', в этом случае результат будет также '100'.

Пример(ы):

P { font-weight: normal }   /* 400 */
H1 { font-weight: 700 }     /* bold */
BODY { font-weight: 400 }
STRONG { font-weight: bolder } /* 500 возможно */

Дочерние элементы наследуют вычисленное значение веса.

'font-stretch'
Значение:normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
Начальное:normal
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:визуальный

Свойство 'font-stretch' выбирает стиль normal, condensed или extended из семейства. Абсолютные значения ключевых слов имеют следующий порядок, от самого узкого до самого широкого :

  1. ultra-condensed
  2. extra-condensed
  3. condensed
  4. semi-condensed
  5. normal
  6. semi-expanded
  7. expanded
  8. extra-expanded
  9. ultra-expanded

Относительное ключевое слово 'wider' устанавливает значение в следующее более "широкое" по сравнению с наследуемым значение (не выше 'ultra-expanded'); относительное ключевое слово 'narrower' устанавливает значение в следующее более "сжатое" значение ниже наследуемого значения (не ниже 'ultra-condensed').

15.2.4 Размер шрифта: свойства 'font-size' и 'font-size-adjust'

'font-size'
Значение:<absolute-size> | <relative-size> | <length> | <percentage> | inherit
Начальное:medium
Применяется: ко всем элементам
Наследуется:да, вычисленное значение наследуется
Процентное:ссылается на размер шрифта родительского элемента
Носитель:визуальный

Это свойство описывает размер шрифта, установленного в solid. Значения имеют следующий смысл:

<absolute-size>
Ключевое слово <absolute-size> ссылается на вход в таблице размеров шрифта, вычисленной и хранимой пользовательским агентом. Возможные значения:

[ xx-small | x-small | small | medium | large | x-large | xx-large ]

На экране компьютера между смежными индексами применяется масштаб 1.2: если шрифт 'medium' - 12pt, то шрифт 'large' будет 14.4pt. Другие носители могут требовать других значений масштаба. Таким образом, ПА должен учитывать качество и доступность шрифтов при обсчёте таблицы размеров. Таблица может отличаться для разных семейств шрифтов.

Примечание. В CSS1 масштаб между смежными индексами принимался в 1.5 и, по опыту пользователей, оказался слишком большим.

<relative-size>/относительный размер
Ключевое слово <relative-size> интерпретируется относительно таблицы размеров шрифта и размера шрифта родительского элемента. Возможные значения:

[ larger | smaller ]

Например, если родительский элемент имеет размер шрифта 'medium', значение 'larger' сделает размер шрифта текущего элемента 'large'. Если размер родительского элемента не вмещается в диапазон таблицы, ПА свободен в интерполяции значений таблицы или округлении до ближайшего. ПАгенту может потребоваться экстраполировать значения таблицы, если цифровое значение находится вне ключевых слов.

<length>
Значение length специфицирует абсолютный размер шрифта (т.е. независимый от таблицы шрифтов ПА). Негативные значения недопустимы.
<percentage>
Процентное значение специфицирует абсолютный размер шрифта относительно размера шрифта родительского элемента. Использование процентных значений или значений в 'em' даёт более надёжные и каскадируемые таблицы стилей.

Текущее значение данного свойства может отличаться от обсчитанного свойства при наличии цифрового значения 'font-size-adjust' и недоступности некоторых размеров шрифта.

Дочерние элементы наследуют обсчитанное значение 'font-size' (в то же время, эффект 'font-size-adjust' может усложниться).

Пример(ы):

P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
'font-size-adjust'
Значение:<number> | none | inherit
Начальное:none
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:визуальный

В двухкамерном написании субъективно очевидный размер и разборчивость шрифта меньше зависят от своих значений 'font-size', нежели от значений 'x-height', или, более доступно, от пропорции этих двух значений, называемой значением аспекта (font size, разделённый на x-height). Чем выше значение аспекта, тем более вероятно, что шрифт меньшего размера будет разборчивым. В противоположность этому, шрифты с меньшим значением аспекта скорее окажутся неразборчивыми ниже порогового значения, чем шрифты с более высоким значением аспекта. Прямая замена шрифтов в связи с размером шрифта может привести к появлению нечитаемых символов.

Например, популярный шрифт Verdana имеет значение аспекта 0.58; если измерение размера шрифта Verdana - 100 единиц, то его x-height - 58 единиц. Для сравнения, Times New Roman имеет значение аспекта 0.46. Verdana, следовательно, имеет тенденцию остаться разборчивым при меньших размерах, чем Times New Roman. И наоборот, Verdana чаще окажется слишком большим при замещении шрифта Times New Roman.

Это свойство позволяет авторам специфицировать значение аспекта, сохраняющее x-height первого шрифта в подставляемом шрифте. Значения имеют следующий смысл:

none
Не сохраняет x-height шрифта.
<number>
Специфицирует значение аспекта. Число относится к значению аспекта первого шрифта. Значение масштаба доступных шрифтов обсчитывается в соответствии со следующей формулой:
y(a/a') = c

где:

y = 'font-size' первого шрифта
a' = значение аспекта доступного шрифта
c = 'font-size' для применения к доступному шрифту

Пример(ы):

Например, если 14px Verdana (со значением аспекта 0.58) окажется недоступным, а доступный шрифта имеет значение аспекта 0.46, font-size замещающего будет 14 * (0.58/0.46) = 17.65px.

Уточнение размера шрифта имеет место при обсчёте текущего значения 'font-size'. Поскольку наследование базируется на обсчитанном значении, дочерние элементы будут наследовать неуточнённые значения.

Первый рисунок показывает различные типы шрифтов, растрированные в обычный размер (11pt. от 72 ppi), вместе с их значениями аспекта. Обратите внимание, что шрифты с большим значением аспекта оказываются больше, чем шрифты с низким значением аспекта. Шрифты со слишком низким значением аспекта оказываются нечитаемыми в данных размерах.

Comparison of 12 point fonts

Следующий рисунок показывает результат 'font-size-adjust' , где Verdana берётся как "первый шрифт", и результат применения масштаба. После применения, размеры шрифтов почти линеарны, хотя текущие (em) размеры варьируются более чем на 100%. Обратите внимание, что 'font-size-adjust' стремится также стабилизировать горизонтальное измерение строк.

Comparison of font-adjusted fonts

15.2.5 Сокращение для свойств шрифта: свойство 'font'

'font'
Значение:[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
Начальное:см. конкретные свойства
Применяется: ко всем элементам
Наследуется:да
Процентное:допускается в 'font-size' и 'line-height'
Носитель:визуальный

Свойство 'font', за исключением случаев, описанных ниже, является сокращённым значением свойств установок 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' и 'font-family' в том же месте таблицы стилей. Синтаксис этого свойства базируется на традиционной типографской нотации сокращений для установки нескольких свойств шрифта.

Все свойства, относящиеся к шрифтам, сначала устанавливаются в свои начальные значения, включая перечисленные в предыдущих параграфах, плюс 'font-stretch' и 'font-size-adjust'. Затем свойства, для которых заданы явные значения в 'font' , устанавливаются в эти значения. Для определения допустимых и начальных значений см. ранее определённые свойства. Для обеспечения обратной совместимости нельзя устанавливать 'font-stretch' и 'font-size-adjust' в иные, нежели начальные, значения, используя свойство 'font'; вместо этого установите индивидуальные свойства.

Пример(ы):

P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
P { font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed }

Во втором правиле процентное значение размера шрифта ('80%') относится к размеру шрифта родительского элемента. В третьем правиле высота строки в процентах ('110%') относится к размеру шрифта самого элемента.

Первые три правила не специфицируют 'font-variant' и 'font-weight' явно, поэтому эти свойства получают свои начальные значения ('normal'). Обратите внимание, что имя семейства шрифтов "new century schoolbook", содержащее пробелы, заключено в кавычки. Четвёртое правило устанавливает 'font-weight' в 'bold', 'font-style' - в 'italic' и неявно устанавливает 'font-variant' в 'normal'.

Пятое правило устанавливает 'font-variant' ('small-caps'), 'font-size' (120% размера шрифта предка), 'line-height' (120% размера шрифта) и 'font-family' ('fantasy'). Из этого следует, что ключевое слово 'normal' применяется к двум оставшимся свойствам: 'font-style' и 'font-weight'.

Шестое правило устанавливает 'font-style', 'font-size' и 'font-family', другие свойства шрифта в свои начальные значения. Оно затем устанавливает 'font-stretch' в 'condensed', поскольку это свойство не может быть установлено в это значение путём использования сокращённого свойства 'font'.

Следующие значения относятся к системным шрифтам:

caption
Шрифт используется для именования элементов управления (ЭУ) (напр., кнопок, выпадающих боксов и меню и т.п.).
icon
Шрифт используется для лэйблов иконок.
menu
Шрифт используется в меню (напр., выпадающих меню и списках).
message-box
Шрифт используется в диалоговых боксах.
small-caption
Шрифт используется для лэйблов небольших ЭУ.
status-bar
Шрифт используется для строки состояния окна.

Системные шрифты могут устанавливаться только полностью, то есть: семейство шрифта, размер, вес, стиль и т.д. - все устанавливаются одновременно. Эти значения могут быть затем установлены индивидуально, если это необходимо. Если шрифт с указанными характеристиками отсутствует на данной платформе, ПА или должен правильно заменить шрифт (напр., уменьшенная версия шрифта 'caption' может использоваться для шрифта 'smallcaption'), или подставить шрифт ПА по умолчанию. Как и для обычных шрифтов, если любые свойства системного шрифта не являются частью доступных операционной системе установок пользователя, то эти свойства должны быть установлены в свои начальные значения.

Это является причиной того, почему это свойство - "почти" сокращённое свойство: системные шрифты могут быть специфицированы только этим свойством, но не самим 'font-family', так что 'font' позволяет авторам сделать больше, чем вся сумма его подсвойств. В то же время, индивидуальные свойства, такие как 'font-weight' , получают свои значения из системного шрифта, и (свойства) могут независимо варьироваться.

Примеры(ы):

BUTTON { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
BUTTON P { font: menu }
BUTTON P EM { font-weight: bolder }

Если шрифт для использования в выпадающих меню в конкретной системе установлен, к примеру, 9-пунктовый Charcoal с весом 600, тогда элементы P - потомки BUTTON будут отображаться так, как если бы действовало правило:

BUTTON P { font: 600 9pt Charcoal }

Поскольку сокращение 'font' устанавливает в начальное значение любое свойство, не получившее явно своего значения, это действие будет равносильно такому объявлению:

BUTTON P {
  font-style: normal;
  font-variant: normal;
  font-weight: 600;
  font-size: 9pt;
  line-height: normal;
  font-family: Charcoal
}

15.2.6 Общие (родовые) семейства шрифтов

Общие семейства шрифтов являются компромиссным механизмом, служащим для сохранения целей некоторых авторов таблиц стилей в том (худшем) случае, когда ни один из специфицированных шрифтов не может быть выбран. Для оптимального типографского контроля в таблицах стилей нужно использовать особые именованные шрифты.

Все пять общих семейств шрифтов определены для использования во всех реализациях CSS (эти семейства не обязательно должны отображаться в пять различных шрифтов). ПА должны предоставлять осмысленный выбор по умолчанию для шрифтов общих семейств, которые (шрифты) отражают характеристики каждого семейства, допустимые в пределах основных технологий.

Рекомендуется, чтобы ПА позволяли пользователям сделать альтернативный выбор общих шрифтов.

serif

Глифы шрифтов serif, в терминах CSS, имеют изгибы на концах, зауженные концы или засечки на концах (включая выгнутые засечки). Шрифты Serif обычно пропорциональны. Они обычно отображают бóльшие отличия между тонкими и толстыми штрихами, нежели шрифты общего семейства 'sans-serif'. CSS использует термин 'serif' для применения со шрифтом любого письма, хотя для некоторых видов письма могут применяться другие наименования, как Mincho (японский), Sung или Song (китайский), Totum или Kodig (корейский). Любой шрифт, описанный таким образом, может использоваться для представления общего семейства 'serif'.

Вот примеры шрифтов, удовлетворяющих этому описанию:

Латинские шрифты | Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
Греческие | Bitstream Cyberbit
Кириллические | Adobe Minion Cyrillic, Excelcior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinst
Еврейские | New Peninim, Raanana, Bitstream Cyberbit
Японские | Ryumin Light-KL, Kyokasho ICA, Futo Min A101
Арабские | Bitstream Cyberbit
Шрифты Чероки | Lo Cicero Cherokee

sans-serif

Глифы шрифтов sans-serif, в терминах CSS, имеют закруглённые ровные окончания - без засечек и каких-либо других орнаментаций. Шрифты Sans-serif обычно пропорциональны. Они часто имеют отклонения между тонкими и толстыми закруглениями, сравнимые со шрифтами семейства 'serif'. CSS использует термин 'sans-serif' для применения со шрифтом любого письма, хотя для некоторых видов письма могут применяться другие наименования, как Gothic (японский), Kai (китайский) или Pathang (корейский). Любой шрифт, описанный таким образом, может использоваться для представления общего семейства 'sans-serif'.

Примеры шрифтов, удовлетворяющих этому описанию:

Латинские шрифты | MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
Греческие | Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
Кириллические | Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
Еврейские | Arial Hebrew, MS Tahoma
Японские | Shin Go, Heisei Kaku Gothic W5
Арабские | MS Tahoma

cursive

Глифы шрифтов cursive, в терминах CSS, обычно имеют связывающие окончания или другие курсивные характеристики типа italic. Глифы частично или полностью соединяются, и результат больше напоминает письмо от руки или кистью, чем типографскую печать. Шрифты для некоторых видов письма, таких как арабское, почти всегда курсивные. CSS использует термин 'cursive' для шрифтов любого письма, хотя другие имена - Chancery, Brush, Swing и Script также употребляются.

Примеры таких шрифтов:

Латинские | Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery
Кириллические | ER Architekt
Еврейские | Corsiva
Арабские | DecoType Naskh, Monotype Urdu 507

fantasy

Фантазийные шрифты, как они используются в CSS, прежде всего декоративны, а уже потом содержат представление символов (в противоположность шрифтам Pi или Picture, не представляющим символы).
Примеры:

Латинские шрифты Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz

monospace

Единственным критерием для моноширинных шрифтов служит то, что все глифы имеют одну и ту же фиксированную ширину. (Некоторые виды письма, такие как арабское, выглядят при этом необычно). Вид напоминает шрифт пишущей машинки, и это часто используется для выделения образцов компьютерного кода. Примеры моноширинных шрифтов:
Латинские | Courier, MS Courier New, Prestige, Everson Mono
Греческие | MS Courier New, Everson Mono
Кириллические | ER Kurier, Everson Mono
Японские | Osaka Monospaced
Чероки | Everson Mono

15.3 Выбор шрифта

Вторая фаза механизма шрифтов CSS2 - выбор в ПА шрифта на базе специфицированных автором свойств шрифта, доступных шрифтов и т.д. Детали алгоритма подбора шрифта рассматриваются ниже.

Имеется четыре возможных действия при выборе шрифта: совпадение имени, смысловое совпадение, синтез и загрузка.

совпадение имени шрифта
В этом случае ПА использует существующий доступный шрифт, который имеет то же самое имя семейства, что и запрашиваемый шрифт. (Обратите внимание, что внешний вид и параметры не обязательно должны совпадать, если шрифт автора документа и шрифт клиентской системы - из разных "литеек"). Информация для сравнения ограничена свойствами шрифта CSS, включая имя семейства. Это единственный метод, используемый CSS1.
смысловое совпадение
В этом случае ПА использует существующий доступный шрифт, который имеет наибольшее совпадение с затребованным шрифтом. (Обратите внимание, что метрические параметры могут не совпадать точно). Информация для сравнения включает информацию о роде шрифта (текстовый или символьный), природе засечек, весе, cap-высоте, x-высоте, восхождении, нисхождении, наклоне и т.п.
синтез
В этом случае ПА создаёт шрифт, который лишь приблизительно совпадает по внешнему виду, а также по метрическим параметрам, с запрошенным шрифтом. Информация для синтезирования включает информацию для сравнения и обычно требует более точных значений параметров, используемых для некоторых схем сравнения. В особенности для синтеза необходимы точные данные ширины и символы для глифов замещения и информация о позиции, если сохраняются все характеристики вида специфицированного шрифта.
загрузка
Наконец, ПА может затребовать шрифт в Web. Этот процесс напоминает получение из Web изображений, звуков или аплетов для текущего документа и так же может вызвать задержку с отображением страницы.

Отображение по частям комбинирует загрузку и один из других методов; при этом предоставляется временный замещающий шрифт (используется совпадение имени, смысловое совпадение или синтез), чтобы дать возможность читать содержимое, пока происходит загрузка шрифта. Как только нужный шрифт загружен, он замещает временный шрифт.

Примечание. Отображение по частям требует наличия метрической информации о шрифте для того, чтобы исключить перерисовку содержимого после загрузки и вывода основного шрифта. Эта метрическая информация достаточно содержательна, чтобы её можно было специфицировать для шрифта документа не более одного раза.

15.3.1 Описание шрифта и @font-face

Описание шрифта является мостом между авторской спецификацией шрифта и данными шрифта, которые представляют собой данные, необходимые для форматирования текста и для представления абстрактных глифов, для которых карта символов в действительности является упорядоченным контуром или растром. Шрифты имеют ссылку из свойств таблицы стилей.

Описания шрифтов добавляются к БД шрифтов и используются затем для выбора соответствующих данных шрифта. Описание шрифта содержит дескрипторы, такие как размещение данных шрифта в Web, и описание этих данных шрифта. Дескрипторы шрифта необходимы также при выборе свойств шрифта из таблицы стилей для определённых данных шрифта. Степень детализации описания шрифта может варьироваться от имени шрифта до списка ширины глифов.

Дескрипторы шрифта можно классифицировать по трём типам:

  1. служащие связкой между использованием шрифта в CSS и описанием шрифта (эти дескрипторы имеют те же имена, что и соответствующие свойства шрифта CSS),
  2. URI для локализации данных шрифта,
  3. для характеристики шрифта, являющиеся связкой между описанием шрифта и данными шрифта.

Все описания шрифта специфицируются at-правилом @font-face.
Общая форма такая:

@font-face { <font-description> }

где <font-description> имеет форму:

дескриптор: значение;
дескриптор: значение;
[...]
дескриптор: значение;

Одно правило @font-face специфицирует значение для одного дескриптора шрифта, явно или неявно. Дескрипторы, не получившие явных значений в правиле, берут их из списка для каждого дескриптора в этой спецификации. Эти дескрипторы применяются только в контексте того правила @font-face, в котором они определены, и не применяются к элементам языка документа. Таким образом, отсутствует указание на то, для каких элементов применяются дескрипторы, или на то, наследуются ли значения дочерними элементами.

Доступные дескрипторы шрифта описываются далее в разделах этой спецификации.

Например, это шрифт 'Robson Celtic', определённый и имеющий ссылку в таблице стилей, содержащейся в документе HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Font test</TITLE>
    <STYLE TYPE="text/css" MEDIA="screen, print">
      @font-face {
        font-family: "Robson Celtic";
        src: url("http://site/fonts/rob-celt")
      }
      H1 { font-family: "Robson Celtic", serif }
    </STYLE>
  </HEAD>
  <BODY>
    <H1> Этот заголовок выводится с использованием Robson Celtic</H1>
  </BODY>
</HTML>

Таблица стилей (в элементе STYLE) содержит правило CSS, устанавливающее все элементы H1 на использование семейства шрифтов 'Robson Celtic'.

Реализация CSS1 будет искать у клиента шрифт, чьи имя семейства и другие свойства совпадают с 'Robson Celtic', и, если совпадение не будет найдено, будет использоваться специфичный для данного ПА резервный шрифт serif (который должен существовать).

ПА, реализующий CSS2, сначала проверяет правила @font-face для поиска описания шрифта, определённого как 'Robson Celtic'. Данный пример содержит подходящее правило. Хотя в этом правиле и не содержится много данных шрифта, в нём есть URI, где можно запросить шрифт для представления данного документа. Загруженные шрифты не должны становиться доступными для других приложений. Если не найдено совпадение для @font-face, ПА попытается выполнить сравнение как ПА с CSS1.

Обратите внимание, что, если шрифт 'Robson Celtic' был установлен на клиентской системе, это может вызвать добавление пользовательским агентом входа в БД шрифтов для установленной копии, как описано в разделе алгоритм совпадения шрифта. Установленная копия получит совпадение до загружаемого шрифта (в предыдущем примере).

Реализации CSS1, не понимающие правило @font-face, вычислят открывающую фигурную скобку и будут игнорировать всё до появления закрывающей скобки. Это at-правило соответствует требованию вперёд-совместимого разбора CSS. Разборщики могут игнорировать эти правила без возникновения ошибки.

Разделение дескрипторов шрифта и данных шрифта даёт возможность выполнит выбор и/или замену шрифта. Защита данных и ограничения репликации для дескрипторов шрифта могут быть менее жёсткими, чем для полных данных шрифта.
Таким образом, возможно установить определение шрифта локально или как минимум иметь его в локальном кэше, если он появляется в обычно используемой таблице стилей; это может не потребовать доступа к полному определению шрифта в Web больше, чем однократно, для именованного шрифта.

Если дескриптор шрифта дублируется, последний появившийся дескриптор используется, а остальное должно игнорироваться.

Также любые дескрипторы, которые не распознаются или не используются ПА, должны игнорироваться. Последующие версии CSS могут предоставить дополнительные дескрипторы для лучшего подбора, замены или синтеза шрифта.

15.3.2 Дескрипторы для подбора шрифта: 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-stretch' и 'font-size'

Следующие дескрипторы имеют те же имена, что и соответствующие свойства шрифта CSS2, и принимают одиночное значение или список разделённых запятыми значений.

Значения в таком списке (за исключением особо отмеченных) - те же самые, что и соответствующие свойства CSS2. Если это одиночное значение, оно должно совпадать. Если это список, любой элемент списка может образовать совпадение. Если в @font-face дескриптор отсутствует, используется начальное значение дескриптора.

'font-family' (Дескриптор)
Значение: [ <family-name> | <generic-family> ] [, [<family-name> | <generic-family> ]]*
Начальное: зависит от ПА
Носитель: визуальный

Это дескриптор имени семейства шрифтов для шрифта, принимающий то же значение, что и свойство 'font-family'.

'font-style' (Дескриптор)
Значение: all | [ normal | italic | oblique ] [, [normal | italic | oblique] ]*
Начальное: all
Носитель: визуальный

Это дескриптор стиля шрифта, принимающий то же значение, что и свойство 'font-style', за исключением того, что использование списка запрещено.

'font-variant' (Дескриптор)
Значение: [normal | small-caps] [,[normal | small-caps]]*
Начальное: normal
Носитель: визуальный

Это CSS-обозначение того, является ли этот шрифт вариантом "малые заглавные". Он принимает те же значения, что и свойство 'font-variant' , за исключением того, что использование списка запрещено.

Примечание. Кириллические прямые шрифты могут быть помечены в 'font-variant' как "малые заглавные", что лучше совмещается с латиницей (а соответствующий курсив - помечен 'font-style' как italic с той же целью).

'font-weight' (Дескриптор)
Значение: all | [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900] [, [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]]*
Начальное: all
Носитель: визуальный

Это дескриптор веса шрифта относительно других шрифтов того же семейства. Принимает те же значения, что и свойство 'font-weight', с тремя исключениями:

  1. относительные ключевые слова (bolder, lighter) не разрешаются;
  2. список разделённых запятыми значений разрешён для шрифтов, содержащих несколько значений веса;
  3. разрешено дополнительное ключевое слово 'all', означающее, что шрифт будет совпадать для всех возможных значений веса, или потому что он имеет несколько значений веса, или потому что этот шрифт имеет единичное значение веса.
'font-stretch' (Дескриптор)
Значение: all | [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded ] [, [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded] ]*
Начальное: normal
Носитель: визуальный

Это обозначение CSS для сжатия или расширения шрифта относительно других шрифтов того же семейства. Принимает те же значения, что и свойство 'font-stretch' , за исключением того, что:

  • относительные ключевые слова (wider, narrower) не допускаются;
  • список разделённых запятыми значений разрешён;
  • разрешено ключевое слово 'all'.
'font-size' (Дескриптор)
Значение: all | <length> [, <length>]*
Начальное: all
Носитель: визуальный

Это дескриптор размера, предоставляемого для данного шрифта. Разрешены только абсолютные единицы измерения, в отличие от свойства 'font-size', которое разрешает относительные и абсолютные размеры. Разрешён список разделённых запятыми размеров.

Начальное значение 'all' подходит для большинства имеющих вес шрифтов, поэтому данный дескриптор используется прежде всего в @font-face для растровых шрифтов или шрифтов, имеющих вес, которые разработаны для растрирования в ограниченных пределах размеров шрифта.

15.3.3 Дескрипторы для квалификации данных шрифта: 'unicode-range'

Следующий дескриптор не обязателен внутри определения шрифта, но используется для того, чтобы избежать проверки или загрузки шрифта, который не имеет достаточного количества глифов для вывода определённого символа.

'unicode-range' (Дескриптор)
Значение: <urange> [, <urange>]*
Начальное: U+0-7FFFFFFF
Носитель: визуальный

Это дескриптор диапазона символов ISO 10646, покрываемого данным шрифтом.

Значения <urange> выражаются с использованием 16-ричных значений с префиксом "U+", соответствующих кодовой позиции в ISO 10646 ([ISO10646]).

Например, U+05D1 это символ ISO 10646 'еврейская буква bet'. Для значений вне Basic Multilingual Plane/BMP (Базовый Многоязычный План) подставляются дополнительные ведущие цифры, соответствующие числу плана, и также 16-ричные, как этот U+A1234 символ Плана 10 с 16-ричной кодовой позицией 1234. Со времени написания, новые символы вне BMP не добавлялись. Ведущие нули (например, 0000004D) верны, но не требуются.

Начальное значение этого дескриптора покрывает не только весь Basic Multilingual Plane (BMP), в пределах U+0-FFFF, но также и весь репертуар ISO 10646. Таким образом, начальное значение говорит о том, что шрифт может содержать глифы любых символов ISO 10646. Спецификация значения 'unicode-range' предоставляет информацию для эффективного поиска, объявляя ограниченный диапазон, в пределах которого шрифт может иметь глифы символов. Шрифт не должен искаться вне указанного диапазона символов.

Значения могут записываться любым количеством цифр. Для единичной цифры символ '?' означает 'любое значение', которое создаёт диапазон позиций символов. Таким образом, используя одиночное число:

unicode-range: U+20A7
нет маски - обозначение одиночной позиции символа (песета - символ испанской валюты)
unicode-range: U+215?
одна маска, покрывает диапазон от 2150 до 215F (дроби)
unicode-range: U+00??
две маски, покрывает диапазон от 0000 до 00FF (Latin-1)
unicode-range: U+E??
две маски, покрывает от 0E00 до 0EFF (письмо Lao).

Пара чисел в данном формате в комбинации с дефисом обозначает более широкий диапазон. Например:

unicode-range: U+AC00-D7FF
это диапазон от AC00 до D7FF (область Hangul Syllables).

Множественные конечные диапазоны могут быть специфицированы путём разделения запятыми. Как и в других списках CSS с разделением запятыми, любой пробел перед или после запятой игнорируется. Например:

unicode-range: U+370-3FF, U+1F??
покрывает диапазон от 0370 до 03FF (Modern Greek) плюс от 1F00 до 1FFF (Ancient polytonic Greek).
unicode-range: U+3000-303F, U+3100-312F, U+32??, U+33??, U+4E00-9FFF, U+F9000-FAFF, U+FE30-FE4F
один из наихудших примеров в плане многозначности, очень определённо обозначает, что этот (очень объёмный) шрифт содержит только китайские символы из ISO 10646 без включения любых символов, уникальных для японского и корейского. Диапазон - от 3000 до 303F (CJK символы и пунктуация), плюс от 3100 до 312F (Bopomofo), плюс от 3200 до 32FF (включая CJK символы и месяцы), плюс от 3300 до 33FF (CJK зона совместимости), плюс от 4E00 до 9FFF (CJK унифицированные идеографы), плюс отF900 до FAFF (CJK идеографы совместимости), плюс от FE30 до FE4F (CJK формы совместимости).

Более понятное представление типичного китайского шрифта:

unicode-range: U+3000-33FF, U+4E00-9FFF

unicode-range: U+11E00-121FF
этот шрифт покрывает предлагаемую регистрацию пиктограмм Aztec в диапазоне от 1E00 до 21FF в плане 1.
unicode-range: U+1A00-1A1F
этот шрифт покрывает предлагаемую регистрацию Irish Ogham в диапазоне от1A00 до 1A1F.

15.3.4 Дескриптор числовых значений: 'units-per-em'

Этот дескриптор определяет количество "units/единиц измерения" на em; эти units могут использоваться другими дескрипторами для выражения различных размеров, следовательно, 'units-per-em' необходим, если другие дескрипторы зависят от него.

'units-per-em' (Дескриптор)
Значение: <number>
Начальное: не определено
Носитель: визуальный

Это дескриптор единиц измерения для координат прямоугольника em, размера решётки дизайна, на которую накладываются глифы.

15.3.5 Дескриптор для ссылки: 'src'

Необходим для ссылки на данные шрифта, загружаемые или установленные локально.

'src' (Дескриптор)
Значение: [ <uri> [format(<string> [, <string>]*)] | <font-face-name> ] [, <uri> [format(<string> [, <string>]*)] | <font-face-name> ]*
Начальное: не определено
Носитель: визуальный

Это выстроенный по приоритету список разделённых запятыми внешних ссылок и/или имён локально установленных файлов. Внешняя ссылка указывает на данные шрифта в Web. Это необходимо, если WebFont загружен. Ресурс шрифта может быть поднабором шрифта-источника, например, он может содержать только те глифы, которые необходимы для текущей страницы или для набора страниц.

Внешняя ссылка состоит из URI, за которым может идти подсказка, касающаяся формата ресурса шрифта, найденного по данному URI, и эта информация должна использоваться клиентами для исключения перехода по ссылкам на те шрифты, которые невозможно использовать. Как и с любой другой гипертекстовой ссылкой, возможны и другие форматы, но для клиента будет надёжнее идти этим путём, нежели пытаться разобрать расширения имён файлов в URI.

Форматирующая подсказка содержит список разделённых запятыми строк формата, обозначающих хорошо известные форматы шрифтов. ПА распознает имя форматов шрифта, поддерживаемых им, и не будет загружать шрифты, которые он не смог распознать.

Начальный список строк формата, определённый в данной спецификации и представляющий форматы, которые наиболее вероятны для использования на различных платформах:

Строка | Формат Шрифта | Примеры типичных расширений
"truedoc-pfr" | TrueDoc™ Portable Font Resource | .pfr
"embedded-opentype" | Embedded OpenType | .eot
"type-1" | PostScript™ Type 1 | .pfb, .pfa
"truetype" | TrueType | .ttf
"opentype" | OpenType, включая TrueType Open | .ttf
"truetype-gx" | TrueType с расширениями GX
"speedo" | Speedo
"intellifont" | Intellifont

Как и с прочими URI в CSS, URI может быть неполным, и в этом случае он расширяется относительно расположения таблицы стилей, содержащей @font-face.

Установленное локально <font-face-name> это полное имя локально установленного шрифта. Full font name\полное имя шрифта - это имя шрифта, сообщённое операционной системой, и оно наиболее вероятно будет использоваться читающим таблицами стилей, таблицей стилей по умолчанию в браузере или возможными авторским таблицами стилей в intranet. Украшения, такие как bold, italic и underline, часто используются для дифференциации шрифтов внутри семейства шрифтов. Дополнительную информацию о полных именах шрифтов см. далее в Примечаниях.

Обозначением для <font-face-name> является полное имя шрифта, которое должно быть заключено в кавычки, поскольку может содержать любые символы, включая пробелы и знаки пунктуации, а также должно быть заключено в local(" и ").

Пример(ы):

src: url("http://foo/bar")
полный URI без информации о формате(ах) шрифта, доступных здесь
src: local("BT Century 751 No. 2 Semi Bold Italic")
ссылается на определённый вид локально установленного шрифта
src: url("../fonts/bar") format("truedoc-pfr")
частичный URI шрифта, доступного в формате TrueDoc
src: url("http://cgi-bin/bar?stuff") format("opentype", "intellifont")
полный URI, в данном случае - скрипта, который может генерировать два разных формата шрифта - OpenType и Intellifont
src: local("T-26 Typeka Mix"), url("http://site/magda-extra") format("type-1")
два альтернативных варианта: первый - локально установленный шрифт, а второй - загружаемый шрифт в формате Type 1.

Доступ к локально установленным шрифтам происходит через <font-face-name>. Font face name (имя разновидности шрифта) не должно быть ни уникальным, ни независимым от формата платформы и шрифта, но в настоящее время это наилучший путь идентификации данных локально установленного шрифта. Использование имени разновидности шрифта (font face name) можно осуществить более точно путём предоставления указания на требуемое дополнение глифа. Это можно сделать, указав диапазон позиций символов ISO 10646, для которых шрифт предоставляет некоторые глифы (см. 'unicode-range').

15.3.6 Дескрипторы для подбора: 'panose-1', 'stemv', 'stemh', 'slope', 'cap-height', 'x-height', 'ascent' и 'descent'

Эти дескрипторы не обязательны для определения CSS2, но могут использоваться при смысловой подстановке шрифтов или уточнении размеров шрифтов, необходимых автору.

'panose-1' (Дескриптор)
Значение: [<integer>]{10}
Начальное: 0 0 0 0 0 0 0 0 0 0
Носитель: визуальный

Это дескриптор числа Panose -1, состоящего из десяти десятеричных чисел, разделённых пробелами. Список значений, разделённых запятыми, не допускается для данного дескриптора, поскольку система Panose -1 может указывать, что диапазоны значений совпадают. Начальное значение - нуль, что означает "любое" для любой цифры PANOSE; все шрифты будут совпадать с числом Panose, если используется это значение. Использование дескриптора Panose -1 рекомендуется исключительно для латинских шрифтов. Дополнительно см. Приложение C.

'stemv' (Дескриптор)
Значение: <number>
Начальное: не определено
Носитель: визуальный

Это дескриптор ширины вертикальной основы шрифта. Если значение не определено, дескриптор не используется для подбора. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.

'stemh' (Дескриптор)
Значение: <number>
Начальное: не определено
Носитель: визуальный

Это дескриптор ширины горизонтальной основы шрифта. Если значение не определено, дескриптор не используется для подбора. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.

'slope' (Дескриптор)
Значение: <number>
Начальное: 0
Носитель: визуальный

Это дескриптор угла вертикального закругления шрифта.

'cap-height' (Дескриптор)
Значение: <number>
Начальное: не определено
Носитель: визуальный

Это дескриптор для числа-значения высоты глифов верхнего регистра шрифта. Если значение не определено, дескриптор не используется для подбора. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.

'x-height' (Дескриптор)
Значение: <number>
Начальное: не определено
Носитель: визуальный

Это дескриптор высоты глифов нижнего регистра шрифта. Если значение не определено, дескриптор не используется для подбора. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'. Этот дескриптор может широко использоваться вместе со свойством 'font-size-adjust', поскольку вычисление значения z шрифтов-кандидатов требует наличия и font size, и x-height; следовательно, рекомендуется включать данный дескриптор.

'ascent' (Дескриптор)
Значение: <number>
Начальное: не определено
Носитель: визуальный

Это дескриптор максимальной неакцентированной высоты шрифта. Если значение не определено, дескриптор не используется для подбора. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.

'descent' (Дескриптор)
Значение: <number>
Начальное: не определено
Носитель: визуальный

Это дескриптор максимальной неакцентированной глубины шрифта. Если значение не определено, дескриптор не используется для подбора. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.

15.3.7 Дескрипторы для синтеза: 'widths', 'bbox' и 'definition-src'

Синтезирование шрифта предполагает, как минимум, совпадение размеров ширины специфицированного шрифта. Следовательно, для синтеза данная метрическая информация должна быть доступна. Таким же образом и для прогрессивного представления необходимо наличие метрической информации о ширине, чтобы исключить перерисовку содержимого при загрузке основного шрифта. Хотя следующие дескрипторы не обязательны для определения CSS2, некоторые необходимы для синтезирования (или прогрессивного отображения без перерисовки), если этого хочет автор. Как только основной шрифт становится доступен, подставленный шрифт должен быть заменён. Любые из этих дескрипторов, если представлены, дают лучшее или более быстрое получение предполагаемого шрифта.

Самыми важными из этих дескрипторов являются 'widths' и 'bbox' , которые используются для предотвращения перерисовки текста при получении доступа к основному шрифту. В дополнение к этому, дескрипторы из набора дескрипторов, используемых для подбора, могут использоваться для лучшего синтеза внешнего вида основного шрифта.

'widths' (Дескриптор)
Значение: [<urange> ]? [<number> ]+ [,[<urange> ]? <number> ]+]
Начальное: не определено
Носитель: визуальный

Это дескриптор ширины глифов. Значением является список разделённых запятыми значений <urange> , за каждым из которых следует одно или более значений ширины глифов. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.

Если <urange> опущен, принимается диапазон U+0-7FFFFFFF, который покрывает все символы и их глифы. Если заданных значений ширины глифов не достаточно, то последнее в списке реплицируется для покрытия urange. Если задано слишком много значений ширины, то излишние игнорируются.

Например:

widths: U+4E00-4E1F 1736 1874 1692
widths: U+1A?? 1490, U+215? 1473 1838 1927 1684 1356 1792
    1815 1848 1870 1492 1715 1745 1584 1992 1978 1770

В первом примере даётся диапазон из 32 символов от 4E00 до 4E1F. Глиф, соответствующий первому символу (4E00), имеет ширину 1736, второй имеет ширину 1874 и третий - 1692. Поскольку предоставлено недостаточное количество значений ширины, последняя ширина реплицируется для покрытия оставшегося диапазона значений. Во втором примере установлена одиночная ширина - 1490 для всего диапазона из 256 глифов, а затем - конкретные значения ширины для диапазона из 16 глифов.

Этот дескриптор не может описывать множество глифов, соответствующих одиночному символу или лигатуры множества символов. Таким образом, этот дескриптор может использоваться только для тех видов письма, которые не имеют контекстуальных форм или мандатных лигатур. Тем не менее, это может применяться в подобных ситуациях. Виды письма, которые требуют отображения символов в глифы по принципу один-во-многие или многие-во-многие, не могут в настоящее время использовать этот дескриптор для синтеза шрифта, хотя и в состоянии использовать загрузку шрифтов или смысловое сопоставление.

'bbox' (Дескриптор)
Значение: <number>, <number>, <number>, <number>
Начальное: не определено
Носитель: визуальный

Это дескриптор максимального ограничивающего бокса шрифта. Значением является разделённый запятыми список из четырех (обязательно) чисел, определяющих, в порядке нижний левый x, нижний левый y, верхний правый x и верхний правый y, ограничивающий бокс для полного шрифта.

'definition-src' (Дескриптор)
Значение: <uri>
Начальное: не определено
Носитель: визуальный

Дескрипторы шрифта могут находиться внутри определения шрифта в таблице стилей или в отдельном ресурсе определения шрифта , идентифицированного в URI. Последний подход может уменьшить сетевой трафик, если несколько таблиц стилей ссылаются на один и тот же шрифт.

15.3.8 Дескрипторы выравнивания: 'baseline', 'centerline', 'mathline' и 'topline'

Эти необязательные дескрипторы используются для выравнивания нескольких отрезков текста друг относительно друга.

'baseline' (Дескриптор)
Значение: <number>
Начальное: 0
Носитель: визуальный

Это дескриптор нижней базовой линии шрифта. Если этот дескриптор не установлен в значение по умолчанию (если не нулевое), должен использоваться также дескриптор 'units-per-em'.

'centerline' (Дескриптор)
Значение: <number>
Начальное: не определено
Носитель: визуальный

Это дескриптор центральной базовой линии шрифта. Если значение не определено, ПА может использовать эвристику: как midpoint/среднюю точку для значений восхождения и нисхождения (ascent и descent). Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.

'mathline' (Дескриптор)
Значение: <number>
Начальное: не определено
Носитель: визуальный

Это дескриптор математической базовой линии шрифта. Если не определен, ПА может использовать центральную базовую линию. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.

'topline' (Дескриптор)
Значение: <number>
Начальное: не определено
Носитель: визуальный

Это дескриптор верхней базовой линии шрифта. Если не определен, ПА может использовать приблизительное значение, такое как ascent. Если этот дескриптор используется, также должен использоваться дескриптор 'units-per-em'.

15.3.9 Примеры

Пример(ы):

Для данного списка шрифтов:
Swiss 721 light | light & light italic
Swiss 721 | roman, bold, italic, bold italic
Swiss 721 medium | medium & medium italic
Swiss 721 heavy | heavy & heavy italic
Swiss 721 black | black, black italic, & black #2
Swiss 721 Condensed | roman, bold, italic, bold italic
Swiss 721 Expanded | roman, bold, italic, bold italic

могут быть использованы следующие описания шрифтов, чтобы сделать их доступными для загрузки:

@font-face {
    font-family: "Swiss 721";
    src: url("swiss721lt.pfr"); /* Swiss 721 light */
    font-style: normal, italic;
    font-weight: 200;
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721.pfr"); /* The regular Swiss 721 */
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721md.pfr"); /* Swiss 721 medium */
    font-style: normal, italic;
    font-weight: 500;
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721hvy.pfr"); /* Swiss 721 heavy */
    font-style: normal, italic;
    font-weight: 700;
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721blk.pfr"); /* Swiss 721 black */
    font-style: normal, italic;
    font-weight: 800,900; /* интересно, что italic весом 900 не существует */
}
@font-face {
    font-family: "Swiss 721";
    src: url(swiss721.pfr); /* Сжатый Swiss 721 */
    font-stretch: condensed;
}
@font-face {
    font-family: "Swiss 721";
    src: url(swiss721.pfr); /* Расширенный Swiss 721 */
    font-stretch: expanded;
}

15.4 Характеристики шрифта

15.4.1 Введение

В этом разделе рассматриваются характеристики шрифта, которые могут пригодиться на стороне клиента для подбора, синтеза и загрузки на различных платформах Web.
Данные могут быть использованы для любого носителя, которому необходимы шрифты в Web для каких-либо других целей, кроме физического внедрения данных шрифта в носитель.

Эти характеристики используются для описания шрифта. Они не являются специфичными для CSS, или таблиц стилей. В CSS каждая характеристика описывается дескриптором шрифта. Эти характеристики могут также отображаться в узлы VRML, CGM Application Structures, Java API или альтернативные языки таблиц стилей. Шрифты, запрашиваемые одним носителем и хранящиеся в прокси-кэше, могут быть повторно использованы другим носителем, экономя время для загрузки и увеличивая пропускную способность сети, если общая система характеристик шрифтов используется повсюду.

Вот неполный список примеров:

  • 2-мерные векторные форматы
    • Computer Graphics Metafile
    • Simple Vector Format
  • 3-мерные графические форматы
    • VRML
    • 3DMF
  • Технологии внедрения объектов
    • Java
    • Active-X
    • Obliq

15.4.2 Полное имя шрифта

Это полное имя конкретного представителя семейства шрифтов. Оно обычно содержит много нестандартизованных текстовых квалификаторов или украшений, присоединённых к имени семейства шрифтов. Оно может также включать производственное имя или аббревиатуру, часто впереди имени шрифта. Оно используется для ссылок только на локально установленные шрифты, поскольку формат "украшенного" имени может варьироваться в зависимости от платформы. Имя должно быть заключено в кавычки.

Например, имена шрифта семейства TrueType и шрифта PostScript могут отличаться в использовании пробельных символов, пунктуации и аббревиатур некоторых слов (напр., чтобы соответствовать различным ограничениям систем или принтеров на размер имён). К примеру, пробелы не допускаются в именах PostScript, но являются обычными в полных именах шрифтов. Таблица имён TrueType может также содержать и имена PostScript, не имеющие пробелов.

Определение имени шрифта важно потому, что оно (имя) является ссылкой на локально установленный шрифт. Важно, чтобы имя было определённым, не зависящим от платформы и приложения. В связи с этим, имя не должно быть зависимым от приложения и языка.

Идеальным решением будет имя, которое уникально идентифицирует каждую коллекцию данных шрифтов. Это имя не должно существовать в текущей практике работы с данными шрифтов. Шрифты с одним базовым именем могут различаться с помощью нескольких дескрипторов. Некоторые из этих дескрипторов, таких как различные дополнения глифов в шрифте, могут быть незначащими, если нужные глифы имеются в шрифте. Другие дескрипторы, такие как различные метрики ширины, делают шрифты с одним именем несовместимыми. Похоже, что невозможно определить правило, по которому можно всегда определить несовместимость и предотвратить использование совершенно соответствующей локальной копии данных шрифта с этим именем. Следовательно, только диапазон символов ISO 10646 будет использоваться для квалификации совпадения имён разновидностей шрифтов.

Поскольку главная задача имени шрифта - дать возможность ПА определить, имеется ли локальная копия специфицированных данных шрифта, имя шрифта обязано быть именем, которое будет иметься во всех законных копиях данных шрифта. Иначе будет генерироваться нежелательный трафик Web из-за неправильных совпадений с локальной копией.

15.4.3 Единицы измерения em-квадрата

Определённые значения, такие как метрики ширины, выражаются в единицах, относительных к абстрактному квадрату, чья высота подразумевается как расстояние между строками того же размера, что и размер типа. Этот квадрат называется em-квадрат и является дизайн-решёткой, на которой определяются контуры глифов. Значение этого дескриптора специфицирует, на сколько единиц делится EM-квадрат. Обычными значениями являются, например, 250 (Intellifont), 1000 (Type 1) и 2048 (TrueType, TrueType GX и OpenType).

Если значение не специфицировано, то невозможно определить, что означает какая-либо метрика шрифта. Например, один шрифт имеет глифы нижнего регистра высотой 450, а меньший шрифт имеет высоту 890! Числа в действительности являются дробями; первый шрифт имеет 450/1000, а второй - 890/2048, что в и в самом деле меньше.

15.4.4 Центральная базовая линия/(Central Baseline)

Задаёт позицию центральной базовой линии в em-квадрате. Центральная базовая линия используется в идеографическом письме для выравнивания, так же как нижняя базовая линия используется для выравнивания в латинице, греческом письме и кириллице.

15.4.5 Кодировка шрифта

Явно или неявно, каждый шрифт имеет ассоциированную таблицу, таблицу кодировки шрифта, которая сообщает, какой символ представляется каждым глифом. Эту таблицу называют также вектором кодирования.

На практике, многие шрифты содержат различные глифы для одного и того же символа.
Какой из этих глифов используется и зависит или от правил языка, или от предпочтений дизайнера.

В арабском языке, например, все буквы содержат 4 (или 2) различных фигуры, в зависимости от того, используется буква в начале слова, в середине, в конце или изолированно. Во всех случаях это один символ, и, соответственно - только один символ в документе-источнике, но при печати он выглядит каждый раз по другому.

Есть также шрифты, которые оставляют за дизайнером графики право выбора из нескольких альтернативных начертаний. К сожалению, CSS2 ещё не предоставляет возможности выбора из этих альтернатив. В настоящий момент, из такого шрифта всегда выбирается начертание по умолчанию.

15.4.6 Имя семейства шрифта

Специфицирует ту часть имени шрифта, где указывается имя семейства данного шрифта. Например, имя семейства для Helvetica-Bold - Helvetica, имя семейства для ITC Stone Serif Semibold Italic - ITC Stone Serif. Некоторые системы рассматривают "украшения", относящиеся к сжатию или расширению как часть имени семейства.

15.4.7 Ширина глифов

Это список значений ширины на дизайн-решётке для глифов, соответствующих каждому символу. Список упорядочен по кодовым точкам ISO10646. Значения ширины не могут быть специфицированы, если более чем один глиф отображает один и тот же символ или если имеются мандатные лигатуры.

15.4.8 Ширина горизонтальной основы

Относится к доминантной основе шрифта. Может быть два или более значений разработанной при дизайне ширины. Например, главная вертикальная основа римских символов будет отличаться от тонкой основы "M" и "N" с засечками, плюс ещё могут быть разные значения ширины для символов нижнего и верхнего регистров в одном шрифте. Также, из-за дизайна или по ошибке, все основы могут иметь слегка отличающиеся значения ширины.

15.4.9 Высота глифов верхнего регистра

Это мера y-координаты верха плоских букв верхнего регистра в латинице, греческом и кириллическом письме, отмеряемая от базовой линии. Этот дескриптор не обязателен для использования в шрифтах, не содержащих глифы этих видов письма.

15.4.10 Высота глифов нижнего регистра

Это мера y-координаты верха неакцентированных, невосходящих букв нижнего регистра в латинице, греческом и кириллическом письме, отмеряемая от базовой линии. Буквы с плоским верхом используются с игнорированием какой-либо оптической корректирующей зоны. Обычно используется как пропорция между высотой верхнего и нижнего регистров как средство сравнения семейств шрифтов.

Illustration of x-height

Этот дескриптор не используется для тех шрифтов, которые не содержат глифов из этих видов письма. Поскольку высота букв верхнего и нижнего регистров часто выражается как пропорция, для сравнения различных шрифтов можно использовать установку высоты верхнего и нижнего регистра в одно значение для однокамерных видов письма, таких как иврит, где для смешанного - латинского и еврейского - текста символы иврита обычно устанавливаются в среднее значение ширины между символами верхнего и нижнего регистров латиницы.

Height of Hebrew characters

15.4.11 Нижняя базовая линия

Задаёт позицию нижней базовой линии в em-квадрате. Нижняя базовая линия используется в латинском, греческом и кириллическом письме для выравнивания, так же как верхняя базовая линия используется для выравнивания в языках, происходящих от санскрита.

15.4.12 Математическая базовая линия

Задаёт позицию математической базовой линии в em-квадрате. Математическая базовая линия используется в математических символах для выравнивания, так же как нижняя базовая линия используется для выравнивания в латинском, греческом и кириллическом письме.

15.4.13 Максимальный ограничивающий бокс

Это наименьший прямоугольник, включающий фигуру, образующуюся в том случае, если все глифы шрифта размещены вместе с их соответствующими источниками и затем прорисованы.

Если динамически загружаемый шрифт генерируется путём подразделения шрифта-предка, bbox должен быть тот же, что и у шрифта-предка.

15.4.14 Максимальная неакцентированная высота

Это расстояние в em-квадрате от базовой линии до высшей точки, достигаемой глифом, исключая любые акценты и знаки диакритики.

Diagram showing several glyphs and the maximum unaccented height

15.4.15 Максимальная неакцентированная глубина

Это расстояние в em-квадрате от базовой линии до низшей точки, достигаемой глифом, исключая любые акценты и знаки диакритики.

Diagram showing several glyphs and the maximum unaccented depth

15.4.16 Число Panose-1

Panose-1 это индустриальный стандарт классификации шрифтов TrueType и технологии подбора шрифтов. Система PANOSE состоит из набора десяти цифр, которые категоризируют ключевые атрибуты шрифта латиницы, процедуры классификации при создании этих чисел и программы Mapper, которая определяет ближайшее возможное совпадение в данном наборе шрифтов. Эта система может, с некоторыми изменениями, использоваться в греческом и кириллическом письме, но не подходит для однокамерного и идеографического письма (еврейского, армянского, арабского, китайского/японского/корейского).

15.4.17 Диапазон символов ISO 10646

Обозначает репертуар глифов шрифта, относящийся к ISO 10646 (Unicode).Поскольку этот репертуар не сплошной (большинство шрифтов не покрывает весь ISO 10646), данный дескриптор содержит блоки диапазона, которые частично покрывают диапазон (не даётся никаких гарантий полного покрытия), и используется для отказа от неподходящих шрифтов (тех, которые не имеют требуемых глифов). Он не указывает, что шрифт определённо имеет нужные глифы, а только что есть смысл загрузить шрифт и просмотреть его. См. детальную информацию о родственных документах в [ISO10646].

Этот метод может быть расширен в будущем для размещения символов Unicode без изменения синтаксиса и с сохранением существующего содержимого.

Шрифты тех форматов, которые не включают данную информацию прямо или косвенно, могут тем не менее использовать эту характеристику, но значение обязательно должно быть предоставлено автором документа или таблицы стилей.

Имеются другие классификации письма, такие как система Monotype (см. [MONOTYPE]) и предлагаемая система ISO. Эти системы плохо расширяются.

В связи с этим, в данной спецификации используется классификация репертуаров глифов в диапазоне символов ISO 10646, которые (символы) могут быть представлены определённым шрифтом. Эта система может расширяться для покрытия будущих дополнений.

15.4.18 Верхняя базовая линия

Задаёт позицию верхней базовой линии в em-квадрате. Используется видами письма, происходящими от санскрита, для выравнивания, так же как нижняя базовая линия используется в латинском, греческом и кириллическом письме.

15.4.19 Ширина вертикальной основы

Это ширина вертикальной (или приблизительно вертикальной) основы глифов. Эта информация часто вводится для подсказки и может не быть непосредственно доступной в шрифтах некоторых форматов. Этот показатель нужен для доминантной вертикальной основы шрифта, поскольку могут быть различные группировки вертикальных основ (напр., одна главная, другая - облегчённого веса, как для M или N верхнего регистра).

15.4.20 Угол вертикального наклона

Это угол в градусах отклонения от вертикали для доминантного вертикального наклона шрифта. Значение является негативным для шрифтов, имеющих наклон вправо, как у почти всех шрифтов italic. Этот дескриптор может также быть специфицирован для наклонных шрифтов и вообще для любого шрифта, чьё положение не строго вертикально. Ненулевые значения сами по себе не обозначают шрифт italic.

15.5 Алгоритм совпадения шрифтов

Эта спецификация расширяет алгоритм, данный ранее в CSS1. Этот алгоритм редуцируется до алгоритма спецификации CSS1, если таблицы стилей не содержат правил @font-face.

Сопоставление дескрипторов со шрифтами должно выполняться тщательно.
Дескрипторы сопоставляются в определённом порядке, чтобы иметь уверенность в том, что результаты этого процесса сопоставления максимально корректны для всех ПА (в предположении, что такая же библиотека шрифтов и их описаний имеется в каждом ПА). Этот алгоритм может быть оптимизирован при условии, что реализация следует поведению алгоритма совершенно точно.

  1. ПА создаёт БД (или получает к ней доступ) соответствующих дескрипторов всех шрифтов, известных ПА. Если имеется два шрифта с совершенно одинаковыми дескрипторами, то один из них игнорируется. ПА может "знать" о шрифте, если он:
    • установлен локально;
    • объявлен с использованием правила @font-face в одной из таблиц стилей, связанных с текущим документом или содержащихся в нём;
    • использован в таблице стилей по умолчанию в ПА, которая концептуально существует во всех ПА и имеет полные правила @font-face для всех шрифтов, используемых в ПА для представления по умолчанию, плюс правила @font-face для пяти специальных общих семейств шрифтов (см. 'font-family'), определённых в CSS2.
  2. Для данного элемента и для каждого символа в данном элементе ПА подбирает свойства шрифтов, применимые к данному элементу. Используя полный набор свойств, ПА применяет дескриптор 'font-family' для выбора пробного семейства шрифтов. Таким образом, совпадение с именем семейства будет найдено до совпадения любого другого дескриптора. Остальные свойства тестируются относительно имени свойства в соответствии с критериями совпадения, описанными в каждом дескрипторе. Если имеются совпадения для всех оставшихся свойств, это означает, что для данного элемента найден совпадающий шрифт.
  3. Если в шаге 2 не найдено совпадений шрифта с 'font-family', ПА, выполняющие смысловое совпадение, могут продолжить проверку других дескрипторов, таких как x-height, ширина глифов и Panose -1, для идентификации другого пробного семейства шрифтов. Если имеются совпадения для всех оставшихся дескрипторов, это означает, что для данного элемента найден совпадающий шрифт. Дескриптор 'font-family' , отражающийся в свойства CSS2, является именем запрашиваемого семейства шрифтов, а не каким-либо именем совпавшего по смыслу шрифта. Подразумевается, что ПА, не поддерживающие поиск совпадений по смыслу, пропускают этот шаг.
  4. Если в шаге 3 не найдено совпадений шрифта с 'font-family', ПА, выполняющие загрузку шрифтов, могут продолжить проверку дескриптора 'src' пробного шрифта из шагов 2 или 3 для идентификации доступного сетевого ресурса и корректного формата. Если имеются совпадения для всех оставшихся дескрипторов, это означает, что для данного элемента найден совпадающий шрифт, и ПА может попытаться загрузить этот ресурс шрифта. ПА может выбрать вариант блокирования этой загрузки или перейти к выполнению следующего шага, пока шрифт грузится. Предполагается, что ПА, не выполняющие загрузку шрифтов, не подключённые к сети, имеющие отключённую загрузку шрифтов в установках пользователя, не имеющие доступа к запрошенному ресурсу по каким-либо причинам или не имеющие возможности по каким-либо причинам использовать загруженный шрифт, пропускают этот шаг.
  5. Если в шаге 3 не найдено совпадений шрифта с 'font-family', ПА, выполняющие синтез шрифта, могут продолжить проверку других дескрипторов, таких как 'x-height', ширина глифов и Panose -1, для идентификации другого пробного семейства шрифтов для синтеза. Если имеются совпадения для всех оставшихся дескрипторов, это означает, что для данного элемента найден совпадающий шрифт и синтез шрифта может начаться. Предполагается, что ПА, не выполняющие синтез шрифта, пропускают этот шаг.
  6. Если шаги 3, 4 и 5 потерпели неудачу и в наборе шрифтов имеется следующий альтернативный 'font-family', тогда для альтернативного 'font-family' повторяются шаги, начиная с шага 2.
  7. Если это совпавший шрифт, но он не содержит глиф(ы) текущего символа(ов), и если в наборе шрифтов имеется альтернативный 'font-family', тогда для альтернативного 'font-family' повторяются шаги, начиная с шага 2. Дескриптор 'unicode-range предназначен для быстрого удаления из процесса обработки тех шрифтов, которые не имеют корректных глифов. Если дескриптор 'unicode-range' указывает, что шрифт содержит некоторые глифы в корректном диапазоне, этот шрифт может быть проверен ПА на наличие нужного (глифа).
  8. Если в семействе, выбранном в шаге2, нет нужного шрифта, тогда используется наследуемое или зависящее от ПА значение 'font-family' , и всё повторяется с шага 2 с использованием наилучшего совпадения, которое может быть получено в данном шрифте. Если конкретный символ не может быть выведен с использованием данного шрифта, ПА должен сообщить, что символ не выводится (например, используя глиф 'отсутствующий символ').
  9. ПА, выполняющие прогрессивное отображение и ожидающие загрузки шрифтов, могут, после успешного завершения загрузки, использовать загруженный шрифт в качестве семейства шрифтов. Если в загруженном шрифте отсутствуют некоторые глифы, имеющиеся во временном шрифте, загруженный (новый) шрифт не используется, а продолжается использование временного шрифта.

Примечание. Вышеуказанный алгоритм можно оптимизировать для исключения необходимости повторных обращений к свойствам CSS2 для каждого символа.

Правила совпадения для дескрипторов из вышеизложенного (2) таковы:

  1. 'font-style' рассматривается первым. Принимается 'italic', если имеется шрифт в БД ПА, обозначенный ключевым словом CSS 'italic' (предпочтительно) или 'oblique'.
    Иначе значения должны подбираться точно, или font-style терпит неудачу.
  2. 'font-variant' рассматривается следующим. 'normal' соответствует шрифту, не помеченному 'small-caps'; 'small-caps' соответствует (1) шрифту, помеченному как 'small-caps', (2) шрифту, в котором малые заглавные синтезируются, или (3) шрифту, в котором все буквы нижнего регистра заменяются на заглавные. Шрифт small-caps может быть синтезирован электронным обмером заглавных букв нормального шрифта.
  3. 'font-weight' рассматривается следующим, он никогда не терпит неудачу. (См. ниже 'font-weight'.)
  4. 'font-size' должен подбираться в пределах допустимых для данного ПА границ. (Обычно размеры измеряемых шрифтов округляются до ближайшего значения в пикселах, а допуск для растровых шрифтов может быть в пределах 20%.) Последующее вычисление, например, в значениях 'em' других свойств, базируется на используемом значении 'font-size', а не на том, которое специфицировано.

15.5.1 Отображение значений ширины шрифтов в имена шрифтов

Значения свойства 'font-weight' задаются по цифровой шкале, где значение '400' (или 'normal') соответствует шрифту "normal" данного семейства шрифтов. Название веса, ассоциированное с этим шрифтом, обычно: Book, Regular, Roman, Normal или иногда Medium.

Ассоциирование других весов семейства с числовыми значениями весов предполагается только для сохранения порядка расположения весов внутри данного семейства. ПА обязаны отображать имена в значения тем способом, который сохраняет визуальный порядок; тип шрифта, отображаемого в значение, не должен быть легче, чем типы, отображаемые в меньшие значения. Нет никаких гарантий того, как ПА будет отображать шрифты семейства в значения веса. Однако следующие указания помогут определить, как такие назначения выполняются в типичных случаях:

  • Если семейство шрифтов уже использует шкалу из 9 цифровых значений (как в OpenType, например), весы шрифтов должны отображаться напрямую.
  • Если оба типа помечены как Medium и один из Book, Regular, Roman или Normal, тогда Medium устанавливается в '500'.
  • Шрифт, помеченный "Bold", часто соответствует значению веса '700'.
  • Если в семействе имеется менее 9 весов, алгоритм по умолчанию для заполнения "дыр" следующий. Если не назначено '500', оно назначается тому же шрифту, что и с '400'. Если не назначено любое из значений: '600', '700', '800' или '900', оно назначается тому же шрифту, который имеет ближайшее значение более тёмного ключевого слова, если оно имеется, в противном случае - тому, который имеет ближайшее значение более светлого. Если не назначено любое из значений: '300', '200' или '100', оно назначается тому же шрифту, который имеет ближайшее значение более светлого ключевого слова, если оно имеется, в противном случае - тому, который имеет ближайшее значение более тёмного.

Нет никаких гарантий, что в наличии будет более тёмный шрифт для каждого значения 'font-weight'; например, некоторые шрифты могут иметь только разновидности normal и bold, другие могут иметь 8 разновидностей различного веса.

Следующие два примера показывают типичные случаи отображения.

Предположим, что в семействе "Rattlesnake" имеется четыре веса, от светлого до тёмного: Regular, Medium, Bold, Heavy.

Первый пример отображения весов
Доступные разновидности | Назначения | Заполнение дыр
"Rattlesnake Regular" | 400 | 100, 200, 300
"Rattlesnake Medium" | 500 |
"Rattlesnake Bold" | 700 | 600
"Rattlesnake Heavy" | 800 | 900

Предположим, что в семействе "Ice Prawn" имеется шесть весов: Book, Medium, Bold, Heavy, Black, ExtraBlack. Заметьте, что в этом примере ПА решает не назначать цифровое значение для "Example2 ExtraBlack".

Второй пример отображения весов
Доступные разновидности | Назначения | Заполнение дыр
"Ice Prawn Book" | 400 | 100, 200, 300
"Ice Prawn Medium" | 500 |
"Ice Prawn Bold" | 700 | 600
"Ice Prawn Heavy" | 800 |
"Ice Prawn Black" | 900 |
"Ice Prawn ExtraBlack" | (none) |

15.5.2 Примеры совпадения шрифтов

Пример(ы):

В следующем примере определена специфическая разновидность шрифта - Alabama Italic. Описание шрифта panose и URI-источник для запроса шрифта на сервере truetype также предоставлены. Дескрипторы font-weight и font-style предоставлены для описания шрифта. Объявление также сообщает, что вес совпадёт с любым запросом в диапазоне от 300 до 500. Семейство шрифтов - Alabama, а имя украшенного шрифта - Alabama Italic.

@font-face {
  src: local("Alabama Italic"),
       url(http://www.fonts.org/A/alabama-italic) format("truetype");
  panose-1: 2 4 5 2 5 4 5 9 3 3;
  font-family: Alabama, serif;
  font-weight:   300, 400, 500;
  font-style:  italic, oblique;
}

Пример(ы):

В следующем примере определено семейство шрифтов. Предоставлен единственный URI для запроса данных шрифта. Этот файл данных будет содержать несколько стилей и весов именованного шрифта. Как только одно из этих определений @font-face будет разыменовано, данные окажутся в кэше ПА для использования другими разновидностями с тем же URI.

@font-face {
  src: local("Helvetica Medium"),
       url(http://www.fonts.org/sans/Helvetica_family) format("truedoc");
  font-family: "Helvetica";
  font-style: normal
}
@font-face {
  src: local("Helvetica Oblique"),
       url("http://www.fonts.org/sans/Helvetica_family") format("truedoc");
  font-family: "Helvetica";
  font-style: oblique;
  slope: -18
}

Пример(ы):

В следующем примере три физических шрифта группируются в один виртуальный шрифт с расширенным диапазоном. В каждом случае имя украшенного шрифта дано в дескрипторе src, и это позволяет предпочтительно использовать локально установленные версии, если они имеются. Четвёртое правило указывает на шрифт с тем же диапазоном, но содержащийся в отдельном ресурсе.

@font-face {
  font-family: Excelsior;
  src: local("Excelsior Roman"), url("http://site/er") format("intellifont");
  unicode-range: U+??; /* Latin-1 */
}
@font-face {
  font-family: Excelsior;
  src: local("Excelsior EastA Roman"), url("http://site/ear") format("intellifont");
  unicode-range: U+100-220; /* Latin Extended A и B */
}
@font-face {
  font-family: Excelsior;
  src: local("Excelsior Cyrillic Upright"), url("http://site/ecr") format("intellifont");
  unicode-range: U+4??; /* Cyrillic */
}
@font-face {
  font-family: Excelsior;
  src: url("http://site/excels") format("truedoc");
  unicode-range: U+??,U+100-220,U+4??;
}

Пример(ы):

Этот пример можно найти в ПА в таблице стилей по умолчанию. Здесь берётся общее семейство CSS2 serif и отображается в большое количество шрифтов serif, которые могут существовать на различных платформах. Не даются метрики, поскольку они варьируются среди возможных альтернатив.

@font-face {
  src: local("Palatino"),
      local("Times New Roman"),
      local("New York"),
      local("Utopia"),
      url("http://somewhere/free/font");
  font-family: serif;
  font-weight: 100, 200, 300, 400, 500;
  font-style: normal;
  font-variant: normal;
  font-size: all
}


Полное описание примера фрэймоподобной структуры

На диаграмме показана фрэймоподобная структура с 'position: fixed'.

Изображён набор фрэймов из 4 панелей. Верхняя панель ("header") занимает всю ширину набора фрэймов и 15% вертикального пространства. Ниже слева находится "sidebar" шириной 10em; его высота высчитывается автоматически. Справа от sidebar и под header находится область "main", чьи размеры вычисляются на базе оставшегося свободного пространства. Наконец, внизу - область "footer" высотой 100px, занимающая всю ширину набора фрэймов.

Помечена каждая область и те размеры, которые не 'auto'.


Генерируемое содержимое, автоматическая нумерация и списки

12 Генерируемое содержимое, автоматическая нумерация и списки

Содержание

  • 12.1 Псевдоэлементы :before и :after
  • 12.2 Свойство 'content'
  • 12.3 Взаимодействие :before и :after с элементами 'compact' и 'run-in'
  • 12.4 Знаки кавычек
    • 12.4.1 Спецификация кавычек свойством 'quotes'
    • 12.4.2 Вставка кавычек с применением свойства 'content'
  • 12.5 Автоматические счётчики и нумерация
    • 12.5.1 Вложение счётчиков и область видимости
    • 12.5.2 Стили счётчиков
    • 12.5.3 Счётчики в элементах с 'display: none'
  • 12.6 Маркировка и списки
    • 12.6.1 Маркировка: свойство 'marker-offset'
    • 12.6.2 Списки: свойства 'list-style-type', 'list-style-image', 'list-style-position' и 'list-style'

В некоторых случаях бывает необходимо, чтобы пользовательские агенты (ПА) отображали содержимое не из дерева документа. Известный пример - нумерованный список: автор не хочет, чтобы нумерация выводилась явным образом, он или она хотят, чтобы ПА генерировал нумерацию автоматически. Также автор может пожелать, чтобы ПА вставлял слово "Figure" перед заглавием или фигурой или "Chapter 7" в начале 7 главы. В особенности для аудио и брайль-носителей, ПА должны иметь возможность вставить эти строки.

В CSS2 содержимое может генерироваться с помощью различных механизмов:

  • Свойство 'content' в сочетании с псевдоэлементами :before и :after.
  • Звуковые свойства 'cue-before' и 'cue-after' (см. главу звуковые таблицы стилей). Если свойство 'content' комбинируется со звуковыми свойствами, то они выводятся в следующем порядке: :before, 'cue-before', ('pause-before'), содержимое элемента, ('pause-after'), 'cue-after' и :after.
  • Элементы со значением 'list-item' для свойства 'display'.

Ниже описаны механизмы, ассоциированные со свойством 'content'.

12.1 Псевдоэлементы :before и :after

Авторы специфицируют стиль и размещение генерируемого содержимого с помощью псевдоэлементов :before и :after. Как видно из их имён, псевдоэлементы :before и :after специфицируют размещение содержимого до и после содержимого дерева документа элемента. Свойство 'content' в соединении с этими псевдоэлементами специфицирует, что же будет вставлено.

Пример(ы):

Следующее правило вставляет строку "Note: " перед содержимым каждого элемента P, чей атрибут "class" имеет значение "note":

P.note:before { content: "Note: " }

Форматирующие объекты (напр., боксы), генерируемые элементом, включают генерируемое содержимое. Так, например, изменение вышеприведённой таблицы стилей:

P.note:before { content: "Note: " }
P.note        { border: solid green }

вызовет появление сплошной зелёной рамки вокруг параграфа, включая начальную строку.

Псевдоэлементы :before и :after наследуют любые наследуемые свойства из тех элементов дерева документа, к которым они присоединены.

Пример(ы):

Следующие правила вставляют открывающий знак кавычек перед каждым элементом Q. Цвет знака кавычки - красный, но шрифт будет тот же, что и шрифт остальной части элемента Q:

Q:before {
  content: open-quote;
  color: red
}

В объявлениях псевдоэлементов :before или :after ненаследуемые свойства получают свои начальные значения.

Пример(ы):

Так, например, поскольку начальное значение свойства 'display' - 'inline', кавычка в предыдущем примере вставляется как инлайн-бокс (т.е. на той же самой строке, что и содержимое начального текста элемента). В следующем примере свойство 'display' явно устанавливается в 'block', так что вставленный текст становится блоком:

BODY:after {
    content: "The End";
    display: block;
    margin-top: 2em;
    text-align: center;
}

Обратите внимание, что пользователи аудио-ПА услышат слова "The End" после вывода оставшейся части содержимого BODY.

ПА обязаны игнорировать следующие свойства при наличии псевдоэлементов :before и :after:
'position', 'float', свойства списков и таблиц.

Псевдоэлементы :before и :after допускают значения свойства 'display':

  • Если субъект селектора является элементом уровня блока, допустимыми значениями будут 'none', 'inline', 'block' и 'marker'.
    Если 'display' имеет другие значения, псевдоэлементы будут вести себя так, как если бы значение было 'block'.
  • Если субъект селектора является инлайн-элементом, допустимыми значениями будут 'none' и 'inline'.
    Если 'display' имеет другие значения, псевдоэлементы будут вести себя так, как если бы значение было 'inline'.

Примечание. Другие значения могут быть допущены в будущих уровнях CSS.

12.2 Свойство 'content'

'content'
Значение:[ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
Начальное:пустая строка
Применяется: к псевдоэлементам :before и :after
Наследуется:нет
Процентное:N/A
Носитель:все

Это свойство используется с псевдоэлементами :before и :after для генерации содержимого документа.
Значения имеют следующий смысл:

<string>
Содержимое текста (см. раздел строки).
<uri>
Значением является URI, обозначающий внешний ресурс. Если ПА не может поддержать данный ресурс (в связи с типами носителя), он может игнорировать данный ресурс.
Примечание.CSS2 не предлагает механизмов для изменения размеров внедрённого объекта или для предоставления его текстуального описания, подобных атрибутам "alt" или "longdesc" для изображений HTML. Это может быть изменено в будущих уровнях CSS.
<counter>
Счётчики/Counters могут быть специфицированы двумя различными функциями: 'counter()' или 'counters()'. Первая имеет две формы: 'counter(name)' или 'counter(name, style)'. Генерируемый текст является значением именованного счётчика от этой точки в структуре форматирования; он форматируется в указанном стиле (по умолчанию - 'decimal'). Вторая функция имеет также две формы: 'counters(name, string)' или 'counters(name, string, style)'. Генерируемый текст является значениями всех счётчиков с данным именем от этой точки в структуре форматирования, разделёнными специфицированной строкой. Счётчики выводятся в указанном стиле(по умолчанию - 'decimal'). См. раздел автоматические счётчики и нумерация.
open-quote и close-quote
Эти значения замещаются подходящей строкой свойства 'quotes'.
no-open-quote и no-close-quote
Ничего не вставляют (пустая строка), но увеличивают (уменьшают) уровень вложения кавычек.
attr(X)
Эта функция возвращает строковое значение X для субъекта селектора. Строка не разбирается процессором CSS. Если субъект селектора не имеет атрибута X, возвращается пустая строка. Чувствительность к регистру имён атрибутов зависит от языка документа.
Примечание. В CSS2 невозможно обращаться к значениям атрибутов других элементов селектора.

Свойство 'display' регулирует, куда помещается содержимое, в блок, инлайн- или маркированный бокс.

Авторы должны поместить объявление 'content' в правила @media, если содержимое является медиа-чувствительным. Например, буквенный текст может использоваться для любой группы носителей, но изображения применяются только к медиа-группам visual + bitmap, а звуковые файлы применяются только к звуковым медиа-группам.

Примеры(ы):

Следующее правило вызывает проигрывание звукового файла в конце отрезка с кавычками (см. дополнительные механизмы в разделе "звуковые таблицы стилей"):

@media aural {
   BLOCKQUOTE:after { content: url("beautiful-music.wav") }
   }

Примеры(ы):

Следующее правило вставляет текст атрибута "alt" HTML перед изображением. Если изображение не выводится, пользователь увидит текст "alt".

IMG:before { content: attr(alt)}

Авторы могут включать новые строки в генерируемое содержимое путём ввода escape-последовательности "\A" в одной из строк после свойства 'content'. Это вставляет форсированный обрыв строки, подобно элементу BR в HTML. См. дополнительную информацию об escape-последовательности "\A" в разделах "Строки" и "Символы и регистр".

Примеры(ы):

H1:before {
    display: block;
    text-align: center;
    content: "chapter\A hoofdstuk\A chapitre"
}

Генерируемое содержимое не изменяет дерево документа. Обычно оно не передаётся обратно процессору языка документа (например, для повторного разбора).

Примечание. В будущих уровнях CSS свойство 'content' сможет принимать дополнительные значения, позволяя варьировать стиль участков генерируемого содержимого, но в CSS2 всё содержимое псевдоэлементов :before или :after имеет один стиль.

12.3 Взаимодействие :before и :after с элементами 'compact' и 'run-in'

Могут быть следующие ситуации:

  1. Элемент 'run-in' или 'compact' имеет псевдоэлемент :before типа 'inline': псевдоэлементы учитываются, если размер бокса элемента вычислен (для 'compact') и выведен внутри того же бокса блока, что и элемент.
  2. Элемент 'run-in' или 'compact' имеет псевдоэлемент :after типа 'inline':
    применяются правила предыдущего пункта.
  3. Элемент 'run-in' или 'compact' имеет псевдоэлемент :before типа 'block': псевдоэлемент форматируется как блок поверх элемента и не участвует в вычислении размера элемента (для 'compact').
  4. Элемент 'run-in' или 'compact' имеет псевдоэлемент :after типа 'block':
    и элемент, и его псевдоэлемент :after форматируются как боксы блока. Элемент не форматируется как инлайн-бокс в своём собственном псевдоэлементе :after.
  5. Элемент, следующий за элементом 'run-in' или 'compact', имеет :before типа 'block': решение о том, как форматировать элемент 'run-in'/'compact', принимается с учётом результирующего бокса блока из псевдоэлемента :before.
  6. Элемент, следующий за элементом 'run-in' или 'compact', имеет :before типа 'inline': решение о том, как форматировать элемент 'run-in'/'compact', зависит от значения 'display' элемента, к которому присоединён :before.

Пример(ы):

Это заголовок 'run-in' с псевдоэлементом :after, после которого идёт параграф с псевдоэлементом :before. В этом пример все псевдоэлементы являются инлайн (по умолчанию). Когда таблица стилей:

H3 { display: run-in }
H3:after { content: ": " }
P:before { content: "... " }

применяется к такому документу-источнику:

<H3>Centaurs</H3>
<P>have hoofs
<P>have a tail

визуальное форматирование будет таким:

Centaurs: ... have hoofs
... have a tail

12.4 Знаки кавычек

В CSS2 авторы могут специфицировать, в чувствительной к стилю и контекстно-зависимой манере, как ПА должны отображать знаки кавычек. Свойство 'quotes' специфицирует пары знаков кавычек для каждого уровня внедрённого закавычивания. Свойство 'content' даёт доступ к таким знакам кавычек и вставляет их до и после закавычивания.

12.4.1 Спецификация кавычек свойством 'quotes'

'quotes'
Значение:[<string> <string>]+ | none | inherit
Начальное:зависит от ПА
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:визуальный

Это свойство специфицирует знаки кавычек для любого количества внедрённых закавычиваний. Значения имеют следующий смысл:

none
Значения 'open-quote' и 'close-quote' свойства 'content' не производят знаков кавычек.
[<string> <string>]+
Значения для 'open-quote' и 'close-quote' свойства 'content' берутся из данного списка пар знаков кавычек (закрывающих и открывающих). Первая (самая левая) пара представляет самый внешний уровень закавычивания, вторая пара - первый уровень внедрения и т.д.
ПА обязан применять подходящие пары знаков кавычек в соответствии с уровнем внедрения.

Пример(ы):

Применение следующей таблицы стилей:

/* Специфицируются пары кавычек двух уровней для двух языков */
Q:lang(en) { quotes: '"' '"' "'" "'" }
Q:lang(no) { quotes: "«" "»" "<" ">" }

/* Вставляются кавычки до и после содержимого элемента Q */
Q:before { content: open-quote }
Q:after  { content: close-quote }

к данному фрагменту HTML:

<HTML lang="en">
  <HEAD>
  <TITLE>Quotes</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Quote me!</Q>
  </BODY>
</HTML>

позволит ПАгенту выдать:

"Quote me!"

а данный фрагмент HTML:

<HTML lang="no">
  <HEAD>
  <TITLE>Quotes</TITLE>
  </HEAD>
  <BODY>
    <P><Q>Trøndere gråter når <Q>Vinsjan på kaia</Q> blir deklamert.</Q>
  </BODY>
</HTML>

выдаст:

«Trøndere gråter når <Vinsjan på kaia> blir deklamert.»

Примечание. Хотя знаки кавычек, специфицированные в 'quotes' предыдущего примера, по соглашению находятся на клавиатурах компьютера, установки для высококачественного вывода потребуют других символов ISO 10646.
В следующей информативной таблице приведён список некоторых символов кавычек ISO 10646:

Ориентировочное представление | код ISO 10646 (hex) | Описание
" | 0022 | КАВЫЧКА [двойная кавычка ASCII]
' | 0027 | АПОСТРОФ [одиночная кавычка ASCII]
< | 2039 | ОДИНОЧНАЯ ЛЕВАЯ УГЛОВАЯ КАВЫЧКА
> | 203A | ОДИНОЧНАЯ ПРАВАЯ УГЛОВАЯ КАВЫЧКА
« | 00AB | ЛЕВАЯ ДВОЙНАЯ УГЛОВАЯ КАВЫЧКА
» | 00BB | ПРАВАЯ ДВОЙНАЯ УГЛОВАЯ КАВЫЧКА
` | 2018 | ЛЕВАЯ ОДИНОЧНАЯ КАВЫЧКА [single high-6]
' | 2019 | ПРАВАЯ ОДИНОЧНАЯ КАВЫЧКА [single high-9]
`` | 201C | ЛЕВАЯ ДВОЙНАЯ КАВЫЧКА [double high-6]
'' | 201D | ПРАВАЯ ДВОЙНАЯ КАВЫЧКА [double high-9]
,, | 201E | ДВОЙНАЯ КАВЫЧКА LOW-9 [double low-9]

12.4.2 Вставка кавычек с применением свойства 'content'

Знаки кавычек вставляются в соответствующих местах документа значениями 'open-quote' и 'close-quote' свойства 'content'. Каждое вхождение 'open-quote' или 'close-quote' замещается одной их строк значения 'quotes', базируясь на глубине вложения.

'Open-quote' относится к первой кавычке из пары, 'close-quote' относится ко второй. То, какая пара кавычек используется, зависит от уровня вложения кавычек: число вхождений 'open-quote' во всём сгенерированном тексте перед текущим вхождением минус число вхождений 'close-quote'. Если глубина - 0, используется первая пара, если глубина - 1, вторая пара и т.д. Если глубина вложения больше, чем число пар, повторяется последняя пара.

Обратите внимание, что глубина вложения кавычек не зависит от вложения документа-источника или структуры форматирования.

Некоторые стили печати требуют, чтобы знак открывающей кавычки повторялся перед каждым параграфом блока кавычек, охватывающего несколько параграфов, но только последний параграф оканчивался знаком закрывающей кавычки. В CSS этого можно добиться вставкой "фантома" закрывающих кавычек. Ключевое слово 'no-close-quote' уменьшает уровень кавычек, но не вставляет знак кавычки.

Пример(ы):

Следующая таблица стилей помещает знаки открывающей кавычки в каждом параграфе в BLOCKQUOTE и вставляет одиночную закрывающую кавычку в конце:

BLOCKQUOTE P:before     { content: open-quote }
BLOCKQUOTE P:after      { content: no-close-quote }
BLOCKQUOTE P.last:after { content: close-quote }

Это относится к последнему параграфу, маркированному классом "last", поскольку нет селекторов, которые могут совпадать с последним потомком элемента.

Для симметрии имеется также ключевое слово 'no-open-quote', которое ничего не вставляет, а увеличивает глубину закавычивания на единицу.

Примечание. Если язык закавычивания отличается от языка окружающего текста, то лучше использовать знаки кавычек языка окружающего текста, а не языка закавычивания.

Пример(ы):

Французский внутри английского:

The device of the order of the garter is “Honi soit qui mal y pense.”
Английский внутри французского:
Il disait: « Il faut mettre l'action en ‹ fast forward ›.»

Таблица стилей типа следующей установит свойство 'quotes' таким образом, что 'open-quote' и 'close-quote' будут корректно работать во всех элементах. Это правила для документов, содержащих только английский, французский или оба этих языка. Одно правило понадобится для каждого дополнительного языка. Обратите внимание на использование комбинатора-потомка (">") для установки кавычек в элементы на базе языка окружающего текста:

[LANG|=fr] > *  { quotes: "«" "»" "\2039" "\203A" }
[LANG|=en] > *  { quotes: "\201C" "\201D" "\2018" "\2019" }

Знаки кавычек для английского показаны здесь в такой форме, что большинство людей будет способно их напечатать. Если Вы можете печатать их напрямую, то они будут выглядеть примерно так:

[LANG|=fr] > * { quotes: "«" "»" "‹" "›" }
[LANG|=en] > * { quotes: "“" "”" "‘" "’" }

12.5 Автоматические счётчики и нумерация

Автоматическая нумерация в CSS2 контролируется двумя свойствами, 'counter-increment' и 'counter-reset'. Счётчики, определённые в этих свойствах, используются с функциями counter() и counters() свойства 'content'.

'counter-reset'
Значение:[ <identifier> <integer>? ]+ | none | inherit
Начальное:none
Применяется: ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:все
'counter-increment'
Значение:[ <identifier> <integer>? ]+ | none | inherit
Начальное:none
Применяется: ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:все

Свойство 'counter-increment' принимает одно или более имён счётчиков (идентификаторы), за каждым из которых может следовать целое число. Это число обозначает, насколько счётчик увеличивается при каждом появлении элемента. Увеличение по умолчанию - 1. Допустимы 0 и негативные значения.

Свойство 'counter-reset' также содержит список из одного или более имён счётчиков, за каждым из которых может следовать целое число. Целое число задаёт значение, в которое счётчик сбрасывается при каждом появлении элемента. По умолчанию - 0.

Если 'counter-increment' относится к счётчику, который не находится в области видимости (см. ниже) какого-либо 'counter-reset', то принимается, что счётчик установлен в 0 корневым элементом.

Пример(ы):

Здесь показан способ нумерации глав и разделов: "Chapter 1", "1.1", "1.2" и т.д.:

H1:before {
    content: "Chapter " counter(chapter) ". ";
    counter-increment: chapter;  /* Добавляет 1 к главе */
    counter-reset: section;      /* Устанавливает раздел в 0 */
}
H2:before {
    content: counter(chapter) "." counter(section) " ";
    counter-increment: section;
}

Если элемент увеличивает/сбрасывает счётчик и использует его (в свойстве 'content' в псевдоэлементах :before или :after), то счётчик используется после того, как увеличен/сброшен.

Если элемент и увеличивает, и сбрасывает счётчик, то счётчик сначала сбрасывается, а затем увеличивается.

Свойство 'counter-reset' следует правилам каскадирования. Таким образом, в соответствии с каскадированием, следующая таблица стилей:

H1 { counter-reset: section -1 }
H1 { counter-reset: imagenum 99 }

сбросит только 'imagenum'. Чтобы сбросить оба счётчика, их нужно специфицировать вместе:

H1 { counter-reset: section -1 imagenum 99 }

12.5.1 Вложение счётчиков и область видимости

Счётчики являются "самовкладывающимися", т.е. повторное использование счётчика в элементах-потомках автоматически создаёт новый объект счётчика. Это важно, например, для таких случаев, как списки в HTML, где элементы могут вкладываться внутри себя на произвольную глубину, и может оказаться невозможным определить уникально именованный счётчик для каждого уровня.

Пример(ы):

Так, следующего достаточно для нумерации вложенных элементов списка. Результат очень похож на применение установки 'display:list-item' и 'list-style: inside' в элементе LI:

OL { counter-reset: item }
LI { display: block }
LI:before { content: counter(item) ". "; counter-increment: item }

Самовложение базируется на том принципе, что каждый элемент, имеющий 'counter-reset' для счётчика X, создаёт новый счётчик X, область видимости которого - элемент, его предшествующие родственники и все потомки элемента и его предшествующих родственников.

В предыдущем примере OL создаст счётчик, и все потомки OL будут ссылаться на этот счётчик.

Если мы обозначим с помощью item[n] nый экземпляр счётчика "item" и "(" and ")" - начало и конец области видимости, то следующий фрагмент HTML будет использовать указанные счётчики. (Мы используем ту же таблицу стилей, что и в предыдущем примере).

<OL>               <!-- (set item[0] to 0          -->
  <LI>item         <!--  increment item[0] (= 1)   -->
  <LI>item         <!--  increment item[0] (= 2)   -->
    <OL>           <!--  (set item[1] to 0         -->
      <LI>item     <!--   increment item[1] (= 1)  -->
      <LI>item     <!--   increment item[1] (= 2)  -->
      <LI>item     <!--   increment item[1] (= 3)  -->
        <OL>       <!--   (set item[2] to 0        -->
          <LI>item <!--    increment item[2] (= 1) -->
        </OL>      <!--   )                        -->
        <OL>       <!--   (set item[3] to 0        -->
          <LI>     <!--    increment item[3] (= 1) -->
        </OL>      <!--   )                        -->
      <LI>item     <!--   increment item[1] (= 4)  -->
    </OL>          <!--  )                         -->
  <LI>item         <!--  increment item[0] (= 3)   -->
  <LI>item         <!--  increment item[0] (= 4)   -->
</OL>              <!-- )                          -->
<OL>               <!-- (reset item[4] to 0        -->
  <LI>item         <!--  increment item[4] (= 1)   -->
  <LI>item         <!--  increment item[4] (= 2)   -->
</OL>              <!-- )                          -->

Функция 'counters()' генерирует строку, составленную из значений всех счётчиков с тем же самым именем, разделённых заданной строкой.

Пример(ы):

Следующая таблица стилей нумерует вложенные элементы списка как "1", "1.1", "1.1.1" и т.д.

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, "."); counter-increment: item }

12.5.2 Стили счётчиков

По умолчанию счётчики форматируются десятичными числами, а все стили, доступные для свойства 'list-style-type' , доступны также для счётчиков.
Обозначение будет такое:

counter(name)

для таблицы стилей по умолчанию, или:

counter(name, 'list-style-type')

Допустимы все стили, включая 'disc', 'circle', 'square' и 'none'.

Пример(ы):

H1:before        { content: counter(chno, upper-latin) ". " }
H2:before        { content: counter(section, upper-roman) " - " }
BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" }
DIV.note:before  { content: counter(notecntr, disc) " " }
P:before         { content: counter(p, none) }

12.5.3 Счётчики в элементах с 'display: none'

Элемент, который не отображается ('display' установлено в 'none'), не может установить или сбросить счётчик.

Пример(ы):

С помощью следующей таблицы стилей элементы H2 с классом "secret" не увеличивают 'count2'.

H2.secret {counter-increment: count2; display: none}

В то же время, элементы с 'visibility' , установленной в 'hidden', увеличивают счётчики.

12.6 Маркировка и списки

Большинство элементов уровня блока в CSS генерируют один основной бокс блока.
В этом разделе мы обсуждаем два механизма CSS, которые заставляют элемент генерировать два бокса: один основной бокс блока (для содержимого элемента) и отдельный бокс маркёра (для элемента оформления, такого как кружок, изображение или номер). Бокс маркёра может быть позиционирован внутри или вне основного бокса. В отличие от содержимого :before и :after, бокс маркёра не влияет на позицию основного бокса, какой бы ни была схема позиционирования.

Самым общим из этих двух механизмов является новый для CSS2 механизм, называемый маркёры. Механизм с более ограниченными возможностями привлекает свойства списков CSS1. Свойства списков дают авторам быстрый результат для многих сценариев упорядоченных и неупорядоченных списков. Однако маркёры дают авторам точный контроль над содержимым и позицией маркёров. Маркёры можно использовать вместе со счётчиками для создания новых стилей списков, нумерации примечаний на полях и многого другого.

Например, следующий пример иллюстрирует, как маркёры могут использоваться для того, чтобы добавлять точку после каждого элемента нумерованного списка.
Эта программа HTML и таблица стилей:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>Создание списка с маркёрами</TITLE>
     <STYLE type="text/css">
      LI:before {
          display: marker;
          content: counter(mycounter, lower-roman) ".";
          counter-increment: mycounter;
      }
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> Это первый элемент списка.
      <LI> Это второй элемент списка.
      <LI> Это третий элемент списка.
    </OL>
  </BODY>
</HTML>

должны дать на выходе примерно следующее:

   i. Это первый элемент списка.
  ii. Это второй элемент списка.
 iii. Это третий элемент списка.

С помощью селекторов потомков и дочерних селекторов можно специфицировать маркёры различных типов в зависимости от глубины вложения списков.

12.6.1 Маркировка: свойство 'marker-offset'

Маркёры создаются путём установки свойства 'display' в 'marker' внутри псевдоэлементов :before или :after. Поскольку содержимое 'block' и 'inline' в :before и :after является частью основного бокса, генерируемого элементом, содержимое 'marker' форматируется в независимом боксе маркёра вне основного бокса. Боксы маркёра форматируются как единая строка (т.е. один бокс строки (строчный бокс)), поэтому они не обладают такой гибкостью, как поплавки. Боксы маркёра создаются только тогда, когда свойство 'content' псевдоэлементов действительно генерирует содержимое.

Боксы маркёра имеют заполнение и рамку, но не имеют полей.

Для псевдоэлемента :before базовая линия текста в боксе маркёра будет выровнена вертикально относительно базовой линии текста первой строки содержимого основного бокса. Если основной бокс не содержит текста, верхний внешний край бокса маркёра будет выровнен с верхним внешним краем основного бокса. Для псевдоэлемента :after базовая линия текста в боксе маркёра будет выровнена вертикально относительно базовой линии текста последней строки содержимого основного бокса. Если основной бокс не содержит текста, нижний внешний край бокса маркёра будет выровнен с нижним внешним краем основного бокса.

Высота бокса маркёра задаётся в свойстве 'line-height'. Бокс маркёра :before (:after) участвует в подсчёте высоты первого (последнего) строчного бокса основного бокса. Таким образом, маркёры выравниваются по первой и последней строке содержимого элемента, даже если боксы маркёра находятся в разных строчных боксах. Если в основном боксе отсутствует первый или последний строчный бокс, то бокс маркёра сам устанавливает свой первый строчный бокс.

Вертикальное выравнивание бокса маркёра внутри его строчного бокса специфицируется свойством 'vertical-align'.

Если значение свойства 'width' - 'auto', то ширина содержимого бокса маркёра является шириной содержимого, иначе - это значение 'width'. Для значений 'width' меньших, чем ширина содержимого, свойство 'overflow' специфицирует поведение при переполнении. Боксы маркёра могут перекрывать основные боксы. Для значений 'width' больших, чем ширина содержимого, свойство 'text-align' определяет горизонтальное выравнивание содержимого в боксе маркёра.

Свойство 'marker-offset' специфицирует смещение по горизонтали между боксом маркёра и ассоциированным основным боксом. Расстояние измеряется между их ближайшими краями рамок.

Примечание. Если маркёр всплывает вправо от поплавка в содержимом, отформатированном слева направо, то основной бокс будет всплывать вниз от правой стороны поплавка, но боксы маркёра будут появляться слева от поплавка. Поскольку левый край рамки основного бокса расположен слева от поплавка (см. описание поплавков), а бокс маркёра расположен вне края рамки основного бокса, маркёр расположится также слева от поплавка. Аналогичным будет и поведение при форматировании справа налево, когда маркёр всплывёт слева от поплавка.

Если свойство 'display' имеет значение 'marker' для содержимого, генерируемого элементом с 'display: list-item', то бокс маркёра, генерируемый для ':before', замещает нормальный маркёр элемента списка.

В следующем примере содержимое центрируется в боксе маркёра фиксированной ширины.
Этот документ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
 <HTML>
    <HEAD>
      <TITLE>Выравнивание содержимого в боксе маркёра</TITLE>
      <STYLE type="text/css">
           LI:before {
               display: marker;
               content: "(" counter(counter) ")";
               counter-increment: counter;
               width: 6em;
               text-align: center;
           }
      </STYLE>
   </HEAD>
   <BODY>
     <OL>
       <LI> Это первый элемент списка.
       <LI> Это второй элемент списка.
       <LI> Это третий элемент списка.
     </OL>
   </BODY>
 </HTML>

должен дать примерно такой вывод:

  (1)   Это первый
        элемент списка.
  (2)   Это второй
        элемент списка.
  (3)   Это третий
        элемент списка.

В следующем примере создаются маркёры до и после элементов списка.

Этот документ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Маркёры до и после элементов списка</TITLE>
    <STYLE type="text/css">
      @media screen, print {
         LI:before {
             display: marker;
          content: url("smiley.gif");
         LI:after {
          display: marker;
             content: url("sad.gif");
         }
      }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>первый элемент списка появляется первым
      <LI>второй элемент списка появляется вторым
    </UL>
  </BODY>
</HTML>

должен дать примерно такой вывод (здесь используется рисунок ascii вместо изображения gif улыбки):

  :-) первый элемент списка
      появляется первым      :-(
  :-) второй элемент списка
      появляется вторым      :-(

В следующем примере маркёры используются для нумерации примечаний (параграфов).

Данный документ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Маркёры для создания нумерованных примечаний 4</TITLE>
    <STYLE type="text/css">
      P { margin-left: 12 em; }
      @media screen, print {
         P.Note:before         {
            display: marker;
          content: url("note.gif")
                       "Примечание " counter(note-counter) ":";
              counter-increment: note-counter;
              text-align: left;
              width: 10em;
         }
     }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Это первый параграф данного документа.</P>
    <P CLASS="Note">Это очень короткий документ.</P>
    <P>Это конец.</P>
  </BODY>
</HTML>

должен дать примерно такой вывод:

                  Это первый параграф
                  данного документа.

  Примечание 1:   Это очень короткий
                  документ.

                  Это конец.
'marker-offset'
Значение:<length> | auto | inherit
Начальное:auto
Применяется: к элементам с 'display: marker'
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Это свойство специфицирует расстояние между ближайшим краем рамки бокса маркёра и ассоциированным с ним основным боксом. Смещение может или специфицироваться пользователем (<length>), или выбираться ПА ('auto'). Значения размеров могут быть отрицательными, но могут существовать ограничения, в зависимости от специфики реализации.

В следующем примере показано, как маркёры могут использоваться для добавления точек после каждого элемента нумерованного списка.
Эта программа HTML и таблица стилей:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
    <HEAD>
      <TITLE>Пример маркёров 5</TITLE>
      <STYLE type="text/css">
           P { margin-left: 8em } /* Создаёт пространство для счётчиков */
           LI:before {
               display: marker;
               marker-offset: 3em;
               content: counter(mycounter, lower-roman) ".";
               counter-increment: mycounter;
           }
      </STYLE>
   </HEAD>
   <BODY>
     <P> Это большой предшествующий параграф ...
     <OL>
       <LI> Это первый элемент списка.
       <LI> Это второй элемент списка.
       <LI> Это третий элемент списка.
     </OL>
     <P> Это большой последующий параграф ...
   </BODY>
 </HTML>

должен дать примерно такой вывод:

        Это большой предшествующий
        параграф ...

   i.   Это первый элемент списка.
  ii.   Это второй элемент списка.
 iii.   Это третий элемент списка.

        Это большой последующий
        параграф ...

12.6.2 Списки: свойства 'list-style-type', 'list-style-image', 'list-style-position' и 'list-style'

Свойства списков создают базовое визуальное форматирование списков. Как и с более общими маркёрами, элемент с 'display: list-item' генерирует основной для содержимого элемента и необязательный бокс маркёра. Другие свойства списка позволяют авторам специфицировать тип маркёра (изображение, глиф или цифра) и его позицию относительно основного бокса (вне или внутри него перед содержимым). Они не позволяют авторам специфицировать другие стили (цвет, шрифт, выравнивание и т.п.) для маркёра списка или уточнять его позицию относительно основного бокса.

Следовательно, если маркёр M (созданный в 'display: marker') используется с элементом списка, созданным в свойстве списка, M замещает стандартный маркёр элемента списка.

Вместе со свойствами списка свойства фона применяются только к основному боксу; бокс маркёра 'outside' прозрачен. Маркёры дают больший контроль над стилем бокса маркёра.

'list-style-type'
Значение:disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit
Начальное:disc
Применяется: к элементам с 'display: list-item'
Наследуется:да
Процентное:N/A
Носитель:визуальный

Это свойство специфицирует вид маркёра элемента списка, если 'list-style-image' имеет значение 'none' или если изображение, на которое указывает URI, не может быть отображено. Значение 'none' специфицирует отсутствие маркёров, для других случаев имеются три типа маркёров: глифы, системы нумерации и алфавитные системы.

Примечание. Нумерованные списки улучшают доступность документа, т.к. делают списки более удобными для навигации.

Глифы специфицируются с помощью disc, circle и square. Их точное представление зависит от ПА.

Системы нумерации специфицируются с помощью:

decimal
Десятеричных чисел, начинающихся с 1.
decimal-leading-zero
Десятеричных чисел, дополненных начальными нулями (например, 01, 02, 03, ..., 98, 99).
lower-roman
Римских цифр в нижнем регистре (i, ii, iii, iv, v и т.д.).
upper-roman
Римских цифр в верхнем регистре (I, II, III, IV, V и т.д.).
hebrew
Традиционной еврейской нумерации.
georgian
Традиционной грузинской нумерации (an, ban, gan, ..., he, tan, in, in-an, ...).
armenian
Традиционной армянской нумерации.
cjk-ideographic
Простых идеографических чисел.
hiragana
a, i, u, e, o, ka, ki, ...
katakana
A, I, U, E, O, KA, KI, ...
hiragana-iroha
i, ro, ha, ni, ho, he, to, ...
katakana-iroha
I, RO, HA, NI, HO, HE, TO, ...

ПА, не распознающий системы нумерации, должен использовать 'decimal'.

Примечание. Этот документ не специфицирует точный механизм действия каждой системы нумерации (например, как вычисляются римские цифры). В будущих Примечаниях W3C могут быть даны дальнейшие разъяснения.

Алфавитные системы специфицируются с помощью:

lower-latin или lower-alpha
Букв ascii нижнего регистра (a, b, c, ... z).
upper-latin или upper-alpha
Букв ascii верхнего регистра (A, B, C, ... Z).
lower-greek
Классических греческих букв нижнего регистра альфа, бета, гамма, ... (α, β, γ, ...)

Эта спецификация не определяет то, как происходит перенос алфавитной системы в конце алфавита. Например, после 26 элементов списка представление 'lower-latin' не определено. Поэтому для длинных списков мы рекомендуем, чтобы авторы специфицировали точные числа.

Например, следующий документ HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
     <TITLE>Нумерация латинскими буквами нижнего регистра</TITLE>
     <STYLE type="text/css">
          OL { list-style-type: lower-roman }
     </STYLE>
  </HEAD>
  <BODY>
    <OL>
      <LI> Это первый элемент списка.
      <LI> Это второй элемент списка.
      <LI> Это третий элемент списка.
    </OL>
  </BODY>
</HTML>

может дать на выходе:

  i Это первый элемент списка.
 ii Это второй элемент списка.
iii Это третий элемент списка.

Обратите внимание, что выравнивание маркёров списка (здесь - по правому краю) зависит от ПА.

Примечание. Следующие версии CSS могут предоставить более совершенные механизмы международных стилей нумерации.

'list-style-image'
Значение:<uri> | none | inherit
Начальное:none
Применяется: к элементам с 'display: list-item'
Наследуется:да
Процентное:N/A
Носитель:визуальный

Это свойство определяет изображение, которое будет использоваться как маркёр элемента списка. Если изображение доступно, оно замещает маркёр, установленный 'list-style-type'.

Пример(ы):

В следующем примере устанавливается маркёр - изображение "ellipse.png" - в начале каждого элемента списка .

UL { list-style-image: url("http://png.com/ellipse.png") }
'list-style-position'
Значение:inside | outside | inherit
Начальное:outside
Применяется: к элементам с 'display: list-item'
Наследуется:да
Процентное:N/A
Носитель:визуальный

Это свойство специфицирует позицию бокса маркёра в основном боксе блока.
Значения имеют следующий смысл:

outside
Бокс маркёра находится вне основного бокса блока.
Примечание. CSS1 не специфицировал точное размещение бокса маркёра из соображений совместимости, и в CSS2 осталась такая же двусмысленность. Для более точного управления боксами маркёров используйте маркёры.
inside
Бокс маркёра это первый инлайн-бокс в боксе основного блока, после которого всплывает содержимое элемента.

Например:

<HTML>
  <HEAD>
    <TITLE>Сравнение позиций inside/outside</TITLE>
    <STYLE type="text/css">
      UL         { list-style: outside }
      UL.compact { list-style: inside }
    </STYLE>
  </HEAD>
  <BODY>
    <UL>
      <LI>first list item comes first
      <LI>second list item comes second
    </UL>

    <UL class="compact">
      <LI>first list item comes first
      <LI>second list item comes second
    </UL>
  </BODY>
</HTML>

Этот пример отображается так:

Difference between inside and outside list style position [D]

В тексте справа-налево маркёры должны выводиться с правой стороны бокса.

'list-style'
Значение:[ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit
Начальное:не определено для сокращённых свойств
Применяется: к элементам с 'display: list-item'
Наследуется:да
Процентное:N/A
Носитель:визуальный

Свойство 'list-style' - это сокращённое обозначение для установки трёх свойств: 'list-style-type', 'list-style-image' и 'list-style-position' в одном месте в таблице стилей.

Пример(ы):

UL { list-style: upper-roman inside }  /* Какой-либо UL */
UL > UL { list-style: circle outside } /* UL - потомок UL */

Хотя авторы могут специфицировать информацию о 'list-style' непосредственно в элементах списка (напр., LI в HTML), это нужно делать аккуратно. Следующие правила похожи, но в первом объявляется селектор-потомок, а во втором (более специфический) дочерний селектор.

OL.alpha LI   { list-style: lower-alpha } /* LI - потомок OL */
OL.alpha > LI { list-style: lower-alpha } /* LI-наследник OL */

Авторы, использующие только селекторы-потомки, могут не получить тот результат, на который рассчитывали. Рассмотрим следующие правила:

<HTML>
  <HEAD>
    <TITLE>ПРЕДУПРЕЖДЕНИЕ: Непредсказуемый результат из-за каскадирования</TITLE>
    <STYLE type="text/css">
      OL.alpha LI  { list-style: lower-alpha }
      UL LI        { list-style: disc }
    </STYLE>
  </HEAD>
  <BODY>
    <OL class="alpha">
      <LI>level 1
      <UL>
         <LI>level 2
      </UL>
    </OL>
  </BODY>
</HTML>

Ожидается, что элементы списка уровня 1 будут маркированы лэйблами 'lower-alpha', а элементы уровня 2 - лэйблами 'disc'. Однако порядок каскадирования вызовет маскирование второго правила первым (которое содержит специфическую информацию класса). В следующих правилах для решения проблемы используется дочерний селектор:

OL.alpha > LI  { list-style: lower-alpha }
UL LI   { list-style: disc }

Другим решением может быть спецификация информации 'list-style' только для типа элемента списка:

OL.alpha  { list-style: lower-alpha }
UL        { list-style: disc }

При наследовании значения 'list-style' будут перенесены из элементов OL и UL в элементы LI. Это рекомендуемый способ спецификации информации стиля списка.

Пример(ы):

Значение URI может комбинироваться с любым другим значением, как здесь:

UL { list-style: url("http://png.com/ellipse.png") disc }

В данном примере 'disc' будет использоваться, если изображение недоступно.

Значение 'none' свойства 'list-style' устанавливает 'list-style-type' и 'list-style-image' в 'none':

UL { list-style: none }

В результате - никакие маркёры элементов списка не отображаются.


Приложение D: Грамматика CSS2

Приложение D. Грамматика CSS2

Содержание

  • D.1 Грамматика
  • D.2 Лексический сканер
  • D.3 Сравнение лексического разбора в CSS2 и в CSS1

Это приложение является нормативным.

Грамматика определяет синтаксис CSS2. В некотором смысле она является наднабором CSS2, так как в этой спецификации вводятся дополнительные семантические ограничения, не указанные в грамматике. Соответствующие пользовательские агенты (ПА) также обязаны придерживаться правил вперёд-совместимого разбора, нотации свойств и значений и нотации модуля. В дополнение к этому, язык документа может вводить ограничения, например, HTML вводит ограничения на возможные значения атрибута "class".

D.1 Грамматика

Это грамматика LL(1) (но учтите, что большинство ПА не должны использовать её напрямую, поскольку она отражает не соглашения по разбору, а только синтаксис CSS2. Формат продуктов оптимизирован для удобства, и используются некоторые сокращения Yacc (см. [YACC]):

  • *: 0 или более
  • +: 1 или более
  • ?: 0 или 1
  • |: разделитель альтернатив
  • [ ]: группировка

Продуктами являются:

stylesheet
  : [ CHARSET_SYM S* STRING S* ';' ]?
    [S|CDO|CDC]* [ import [S|CDO|CDC]* ]*
    [ [ ruleset | media | page | font_face ] [S|CDO|CDC]* ]*
  ;
import
  : IMPORT_SYM S*
    [STRING|URI] S* [ medium [ ',' S* medium]* ]? ';' S*
  ;
media
  : MEDIA_SYM S* medium [ ',' S* medium ]* '{' S* ruleset* '}' S*
  ;
medium
  : IDENT S*
  ;
page
  : PAGE_SYM S* IDENT? pseudo_page? S*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
pseudo_page
  : ':' IDENT
  ;
font_face
  : FONT_FACE_SYM S*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
operator
  : '/' S* | ',' S* | /* empty */
  ;
combinator
  : '+' S* | '>' S* | /* empty */
  ;
unary_operator
  : '-' | '+'
  ;
property
  : IDENT S*
  ;
ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration [ ';' S* declaration ]* '}' S*
  ;
selector
  : simple_selector [ combinator simple_selector ]*
  ;
simple_selector
  : element_name? [ HASH | class | attrib | pseudo ]* S*
  ;
class
  : '.' IDENT
  ;
element_name
  : IDENT | '*'
  ;
attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ]? ']'
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* IDENT S* ')' ]
  ;
declaration
  : property ':' S* expr prio?
  | /* empty */
  ;
prio
  : IMPORTANT_SYM S*
  ;
expr
  : term [ operator term ]*
  ;
term
  : unary_operator?
    [ NUMBER S* | PERCENTAGE S* | LENGTH S* | EMS S* | EXS S* | ANGLE S* |
      TIME S* | FREQ S* | function ]
  | STRING S* | IDENT S* | URI S* | RGB S* | UNICODERANGE S* | hexcolor
  ;
function
  : FUNCTION S* expr ')' S*

/*
 * Имеется ограничение: цвет обязан иметь
 * 3 или 6 16-ричных цифр (т.е., [0-9a-fA-F]) после "#",
 * например, "#000" это OK, но "#abcd" - нет.
 */
hexcolor
  : HASH S*
  ;

D.2 Лексический сканер

Это сканер, написанный в нотации Flex (см. [FLEX]). Сканер является нечувствительным к регистру.

Два "\377" представляют наибольшее число символа, которое может быть обработано текущей версией Flex (десятеричное 255). Они должны читаться как "\4177777" (десятеричное 1114111), которое является наивысшей возможной кодовой точкой в Unicode/ISO-10646.

%option case-insensitive

h		[0-9a-f]
nonascii	[\200-\377]
unicode		\\{h}{1,6}[ \t\r\n\f]?
escape		{unicode}|\\[ -~\200-\377]
nmstart		[a-z]|{nonascii}|{escape}
nmchar		[a-z0-9-]|{nonascii}|{escape}
string1		\"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2		\'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'

ident		{nmstart}{nmchar}*
name		{nmchar}+
num		[0-9]+|[0-9]*"."[0-9]+
string		{string1}|{string2}
url		([!#$%&*-~]|{nonascii}|{escape})*
w		[ \t\r\n\f]*
nl		\n|\r\n|\r|\f
range		\?{1,6}|{h}(\?{0,5}|{h}(\?{0,4}|{h}(\?{0,3}|{h}(\?{0,2}|{h}(\??|{h})))))

%%

[ \t\r\n\f]+		{return S;}

\/\*[^*]*\*+([^/][^*]*\*+)*\/	/* ignore comments */

"<!--"			{return CDO;}
"-->"			{return CDC;}
"~="			{return INCLUDES;}
"|="			{return DASHMATCH;}

{string}		{return STRING;}

{ident}			{return IDENT;}

"#"{name}		{return HASH;}

"@import"		{return IMPORT_SYM;}
"@page"			{return PAGE_SYM;}
"@media"		{return MEDIA_SYM;}
"@font-face"		{return FONT_FACE_SYM;}
"@charset"		{return CHARSET_SYM;}
"@"{ident}		{return ATKEYWORD;}

"!{w}important"		{return IMPORTANT_SYM;}

{num}em			{return EMS;}
{num}ex			{return EXS;}
{num}px			{return LENGTH;}
{num}cm			{return LENGTH;}
{num}mm			{return LENGTH;}
{num}in			{return LENGTH;}
{num}pt			{return LENGTH;}
{num}pc			{return LENGTH;}
{num}deg		{return ANGLE;}
{num}rad		{return ANGLE;}
{num}grad		{return ANGLE;}
{num}ms			{return TIME;}
{num}s			{return TIME;}
{num}Hz			{return FREQ;}
{num}kHz		{return FREQ;}
{num}{ident}		{return DIMEN;}
{num}%			{return PERCENTAGE;}
{num}			{return NUMBER;}

"url("{w}{string}{w}")"	{return URI;}
"url("{w}{url}{w}")"	{return URI;}
{ident}"("		{return FUNCTION;}

U\+{range}		{return UNICODERANGE;}
U\+{h}{1,6}-{h}{1,6}	{return UNICODERANGE;}

.			{return *yytext;}

D.3 Сравнение лексического разбора в CSS2 и в CSS1

Имеются некоторые различия между вышеприведённым синтаксисом и синтаксисом, специфицированным в рекомендациях CSS1 ([CSS1]). Большинство этих отличий - из-за новых понятий в CSS2, которые отсутствовали в CSS1. Другие - из-за того, что грамматика была переписана, чтобы сделать её более читабельной. Однако есть и некоторые несовместимые изменения, которые вызвали бы ошибку в CSS1. Они разъяснены ниже.

  • Таблицы стилей CSS1 могут быть кодированы только 1-байт-на-символ, как ASCII и ISO-8859-1. CSS2 не имеет таких ограничений. На практике было мало трудностей с экстраполированием сканера CSS1, и некоторые ПА принимали 2-байтное кодирование.
  • CSS1 допускал только четыре 16-ричных числа после обратного слэша (\) для ссылок на символы Unicode, CSS2 допускает шесть. Кроме того, CSS2 допускает символы пробела в качестве разграничителей escape-последовательностей. Например, в соответствии с CSS1, строка "\abcdef" имеет 3 буквы (\abcd, e и f), а в соответствии с CSS2 - только одну (\abcdef).
  • Символ табуляции (ASCII 9) в строках не допускается. Однако, поскольку строки в CSS1 использовались только для имён шрифтов и для URL, единственное, что может привести к несовместимости между CSS1 и CSS2, это если таблица стилей содержит семейство шрифтов, имеющее символ табуляции в своём имени.
  • Также символы новой строки (escape-последовательность с обратным слэшем) не допускались в строках CSS1.
  • CSS2 разбирает число со следующим непосредственно за ним идентификатором как обозначение DIMEN (т.е. как неизвестный модуль). CSS1 разбирал его как число и как идентификатор. Это означает, что в CSS1 объявление 'font: 10pt/1.2serif' было корректным, а в 'font: 10pt/12pt serif'; в CSS2 требуется пробел перед "serif". (Некоторые ПА принимали первый пример, но не принимали второй.)
  • В CSS1 имя класса могло начинаться цифрой (".55ft"), если только оно не было размером (".55in").
    В CSS2 такие классы разбираются как неизвестные размеры (чтобы позволить в будущем дополнение новых модулей). Чтобы сделать ".55ft" действующим классом, CSS2 требует, чтобы первая цифра была escape (".\55ft")


About

Created using
htm2chm 3.0

Download it NOW!


Каскадные Таблицы Стилей, Уровень 2

W3C REC-CSS2-19980512

Cascading Style Sheets, level 2
CSS2 Specification
(Каскадные Таблицы Стилей, уровень 2
Спецификация CSS2)

Рекомендации W3C от 12 Мая 1998 года

Внимание !

  • Официальная нормативная версия этой спецификации возможна только на английском языке и находится по адресу: http://www.w3.org/TR/1998/REC-CSS2-19980512
  • Данный перевод НЕ является официальным документом W3C.
  • Все Авторские Права Принадлежат W3C.
  • Данный документ может содержать ошибки перевода и опечатки.

Данная версия:
http://www.w3.org/TR/1998/REC-CSS2-19980512;
Последняя версия:
http://www.w3.org/TR/REC-CSS2
Предыдущая версия:
http://www.w3.org/TR/1998/PR-CSS2-19980324
Редакторы:
Bert Bos<bbos@w3.org>
Håkon Wium Lie<howcome@w3.org>
Chris Lilley<chris@w3.org>
Ian Jacobs<ij@w3.org>
На русский язык перевёл Александр Пирамидин <a_pyramidin@yahoo.com>

Резюме

Эта спецификация определяет Каскадные таблицы Стилей, уровень 2 (CSS2). CSS2 - это язык таблиц стилей, позволяющий авторам и пользователям подключать стили (например, шрифты, пробелы и звуковые сигналы) в структурированные документы (например, документы HTML и приложения XML). CSS2 упрощает создание и обслуживание Web-сайта путём разделения структуры и стиля представления документов.

CSS2 построен на основе CSS1 (см. [CSS1]), и, с очень небольшими исключениями, все таблицы стилей CSS1 остаются действующими в CSS2. CSS2 поддерживает таблицы для конкретных носителей, так что авторы могут создавать представление своих документов для визуальных браузеров, звуковых устройств, принтеров, брайль-устройств, ручных портативных устройств и т.д. Данная спецификация поддерживает также позиционирование содержимого, загружаемые шрифты, отображение таблиц, возможности интернационализации, автоматические счётчики и нумерацию и некоторые свойства, относящиеся к пользовательскому интерфейсу.

Статус этого документа

Этот документ был просмотрен Членами W3C и другими заинтересованными сторонами и одобрен Директором как Рекомендации W3C. Это неизменяемый документ, он может использоваться как справочный материал или цитироваться в других документах. Задачей W3C является привлечение внимания к Рекомендациям и этой спецификации и её широкое распространение. Это расширит функциональные возможности Web.

Список текущих Рекомендаций W3C и другую техническую документацию можно найти на: http://www.w3.org/TR.

Публичная дискуссия о возможностях CSS проходит на: www-style@w3.org.

Доступные форматы

Спецификация CSS2 доступна в следующем формате:

HTML:
http://www.w3.org/TR/1998/REC-CSS2-19980512
и в других форматах на W3C.

В случае разночтений между различными формами спецификации, http://www.w3.org/TR/1998/REC-CSS2-19980512 имеет приоритет.

Доступные языки

Английская версия этой спецификации является единственным нормативным документом. Однако переводы этого документа можно найти по адресу http://www.w3.org/Style/css2-updates/translations.html.

Опечатки и ошибки

Список ошибок и опечаток, найденных в этой спецификации (в английской версии), находится в http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html.

Об ошибках, замеченных Вами в этом документе, сообщайте, пожалуйста, по адресам css2-editors@w3.org
 и a_pyramidin@yahoo.com (переводчик русской версии).

Краткое Содержание

  • 1 О спецификации CSS2
  • 2 CSS2. Введение
  • 3 Соответствие: Требования и Рекомендации
  • 4 CSS2. Синтаксис и базовые типы данных
  • 5 Селекторы
  • 6 Установка значений свойств, Каскадирование и Наследование
  • 7 Типы Носителя
  • 8 Модель Бокса
  • 9 Модель визуального форматирования
  • 10 Модель визуального форматирования. Детали
  • 11 Визуальные эффекты
  • 12 Генерируемое содержимое, автоматическая нумерация и списки
  • 13 Страничные носители
  • 14 Цвета и Фон
  • 15 Шрифты
  • 16 Текст
  • 17 Таблицы
  • 18 Интерфейс пользователя
  • 19 "Звуковые" таблицы стилей
  • Приложение A. Образец таблицы стилей для HTML 4.0
  • Приложение B. Изменения по сравнению с CSS1
  • Приложение C. Замечания по реализации и выполнению для шрифтов
  • Приложение D. Грамматика CSS2
  • Приложение E. Ссылки
  • Приложение F. Индекс Свойств
  • Приложение G. Индекс Дескрипторов
  • Приложение H. Индекс

Полное Содержание

  • 1 О спецификации CSS2
    • 1.1 Чтение спецификации
    • 1.2 Как организована спецификация
    • 1.3 Соглашения
      • 1.3.1 Элементы и атрибуты языка документа
      • 1.3.2 Определения свойств CSS
        • Значение
        • Начальное
        • Применяется
        • Наследуется
        • Процентное значение
        • Группа носителей
      • 1.3.3 Сокращённые формы свойств
      • 1.3.4 Примечания и примеры
      • 1.3.5 Изображения и полное описание
    • 1.4 Благодарности
    • 1.5 Авторские Права

  • 2 CSS2. Введение
    • 2.1 CSS2. Краткое пособие для HTML
    • 2.2 CSS2. Краткое пособие для XML
    • 2.3 Модель процесса CSS2
      • 2.3.1 Канва
      • 2.3.2 Модель адресации CSS2
    • 2.4 Принципы дизайна CSS

  • 3 Соответствие: Требования и Рекомендации
    • 3.1 Определения
    • 3.2 Соответствие
    • 3.3 Ошибочные условия
    • 3.4 Тип содержимого text/css

  • 4 CSS2. Синтаксис и базовые типы данных
    • 4.1 Синтаксис
      • 4.1.1 Лексический разбор
      • 4.1.2 Ключевые слова
      • 4.1.3 Символы и регистр
      • 4.1.4 Операторы
      • 4.1.5 at-правила (at-rules)
      • 4.1.6 Блоки
      • 4.1.7 Наборы правил, блоки объявлений и селекторы
      • 4.1.8 Объявления и свойства
      • 4.1.9 Комментарии
    • 4.2 Правила обработки ошибок грамматического разбора
    • 4.3 Значения
      • 4.3.1 Целые и вещественные числа
      • 4.3.2 Размеры
      • 4.3.3 Процентные
      • 4.3.4 URL + URN = URI
      • 4.3.5 Счётчики
      • 4.3.6 Цвета
      • 4.3.7 Угловые значения
      • 4.3.8 Время
      • 4.3.9 Частоты
      • 4.3.10 Строки
    • 4.4 Представление документа CSS
      • 4.4.1 Мнемоники символов, не представленных в кодировке символов

  • 5 Селекторы
    • 5.1 Блоки символов для подстановки
    • 5.2 Синтаксис селектора
      • 5.2.1 Группирование
    • 5.3 Универсальный селектор
    • 5.4 Селекторы типа
    • 5.5 Селекторы потомков
    • 5.6 Селекторы дочерних элементов
    • 5.7 Смежные селекторы-родственники
    • 5.8 Селекторы атрибутов
      • 5.8.1 Совпадение атрибутов и их значений
      • 5.8.2 Значения по умолчанию для атрибутов в ОТД
      • 5.8.3 Селекторы класса
    • 5.9 Селекторы ID
    • 5.10 Псевдоэлементы и псевдоклассы
    • 5.11 Псевдоклассы
      • 5.11.1 Псевдокласс :first-child
      • 5.11.2 Псевдоклассы гиперссылки :link и :visited
      • 5.11.3 Динамические псевдоклассы :hover, :active и :focus
      • 5.11.4 Псевдокласс языка :lang
    • 5.12 Псевдоэлементы
      • 5.12.1 Псевдоэлемент :first-line
      • 5.12.2 Псевдоэлемент :first-letter
      • 5.12.3 Псевдоэлементы :before и :after

  • 6 Установка значений свойств, Каскадирование и Наследование
    • 6.1 Специфицированные, вычисленные и текущие значения
      • 6.1.1 Специфицированные значения
      • 6.1.2 Вычисленные значения
      • 6.1.3 Реальные (текущие) значения
    • 6.2 Наследование
      • 6.2.1 Значение 'inherit'
    • 6.3 Правило @import
    • 6.4 Каскад
      • 6.4.1 Порядок каскадирования
      • 6.4.2 Правила !important
      • 6.4.3 Вычисление специфики селектора
      • 6.4.4 Старшинство не-CSS подсказок

  • 7 Типы носителя
    • 7.1 Введение
    • 7.2 Спецификация таблиц стилей, зависимых от типа носителя
      • 7.2.1 Правило @media
    • 7.3 Распознаваемые типы носителя
      • 7.3.1 Группы носителей

  • 8 Модель Бокса
    • 8.1 Размеры бокса
    • 8.2 Пример полей, заполнения и рамок
    • 8.3 Свойства поля: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin'
      • 8.3.1 Сжатие полей
    • 8.4 Свойства заполнения: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' и 'padding'
    • 8.5 Свойства рамки
      • 8.5.1 Ширина рамки: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' и 'border-width'
      • 8.5.2 Цвет рамки: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' и 'border-color'
      • 8.5.3 Стиль рамки: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' и 'border-style'
      • 8.5.4 Сокращённые свойства рамки: 'border-top', 'border-bottom', 'border-right', 'border-left' и 'border'

  • 9 Модель визуального форматирования
    • 9.1 Введение
      • 9.1.1 Порт просмотра
      • 9.1.2 Содержащие блоки
    • 9.2 Управление генерацией боксов
      • 9.2.1 Элементы уровня блока и боксы блока
        • Анонимные боксы блока
      • 9.2.2 Инлайн-элементы и инлайн-боксы
        • Анонимные инлайн-боксы
      • 9.2.3 Компактные боксы
      • 9.2.4 Втягивающиеся боксы
      • 9.2.5 Свойство 'display'
    • 9.3 Схемы позиционирования
      • 9.3.1 Выбор схемы позиционирования: свойство 'position'
      • 9.3.2 Позиционирование и заполнение в боксе: 'top', 'right', 'bottom', 'left'
    • 9.4 Нормальное расположение
      • 9.4.1 Контекст форматирования блока
      • 9.4.2 Контекст форматирования инлайн
      • 9.4.3 Относительное позиционирование
    • 9.5 Поплавки
      • 9.5.1 Позиционирование поплавка: свойство 'float'
      • 9.5.2 Управление обтеканием после поплавка: свойство 'clear'
    • 9.6 Абсолютное позиционирование
      • 9.6.1 Фиксированное позиционирование
    • 9.7 Соотношение между 'display', 'position' и 'float'
    • 9.8 Сравнение нормального расположения, поплавков и абсолютного позиционирования
      • 9.8.1 Нормальное расположение
      • 9.8.2 Относительное позиционирование
      • 9.8.3 Обтекание бокса
      • 9.8.4 Абсолютное позиционирование
    • 9.9 Слои
      • 9.9.1 Спецификация уровня в пакете слоёв: свойство 'z-index'
    • 9.10 Направление текста: свойства 'direction' и 'unicode-bidi'

  • 10 Модель визуального форматирования. Детали
    • 10.1 Определение "содержащего блока"
    • 10.2 Ширина содержимого: свойство 'width'
    • 10.3 Вычисление ширины и полей
      • 10.3.1 Инлайн, незамещаемые элементы
      • 10.3.2 Инлайн, замещаемые элементы
      • 10.3.3 Уровень блока, незамещаемые элементы при нормальном всплывании
      • 10.3.4 Уровень блока, замещаемые элементы при нормальном всплывании
      • 10.3.5 Всплывание, незамещаемые элементы
      • 10.3.6 Всплывание, замещаемые элементы
      • 10.3.7 Абсолютно позиционированные незамещаемые элементы
      • 10.3.8 Абсолютно позиционированные замещаемые элементы
    • 10.4 Минимальная и максимальная ширина: 'min-width' и 'max-width'
    • 10.5 Высота содержимого: свойство 'height'
    • 10.6 Вычисление высоты и полей
      • 10.6.1 Инлайн, незамещаемые элементы
      • 10.6.2 Инлайн, замещаемые элементы уровня блока, замещаемые элементы при нормальном всплывании и всплывание, замещаемые элементы
      • 10.6.3 Уровень блока, незамещаемые элементы при нормальном обтекании и всплывание, незамещаемые элементы
      • 10.6.4 Абсолютно позиционированные незамещаемые элементы
      • 10.6.5 Абсолютно позиционированные замещаемые элементы
    • 10.7 Минимальная и максимальная высота: 'min-height' и 'max-height'
    • 10.8 Подсчёт высоты строк: свойства 'line-height' 'vertical-align'
      • 10.8.1 Габариты и полугабариты

  • 11 Визуальные эффекты
    • 11.1 Переполнение и сжатие
      • 11.1.1 Переполнение: свойство 'overflow'
      • 11.1.2 Сжатие: свойство 'clip'
    • 11.2 Видимость: свойство 'visibility'

  • 12 Генерируемое содержимое, автоматическая нумерация и списки
    • 12.1 Псевдоэлементы :before и :after
    • 12.2 Свойство 'content'
    • 12.3 Взаимодействие :before и :after с элементами 'compact' и 'run-in'
    • 12.4 Знаки кавычек
      • 12.4.1 Спецификация кавычек свойством 'quotes'
      • 12.4.2 Вставка кавычек с применением свойства 'content'
    • 12.5 Автоматические счётчики и нумерация
      • 12.5.1 Вложение счётчиков и область видимости
      • 12.5.2 Стили счётчиков
      • 12.5.3 Счётчики в элементах с 'display: none'
    • 12.6 Маркировка и списки
      • 12.6.1 Маркировка: свойство 'marker-offset'
      • 12.6.2 Списки: свойства 'list-style-type', 'list-style-image', 'list-style-position' и 'list-style'

  • 13 Страничные носители
    • 13.1 Введение
    • 13.2 Страничные боксы: правило @page
      • 13.2.1 Поля страниц
      • 13.2.2 Размер страницы: свойство 'size'
        • Представление страничных боксов, не помещающихся на листе
        • Позиционирование страничного бокса на листе
      • 13.2.3 Знаки обрезки: свойство 'marks'
      • 13.2.4 Левая, правая и первая страницы
      • 13.2.5 Содержимое вне страничного бокса
    • 13.3 Разрывы страниц
      • 13.3.1 Разрыв перед/после элементов: 'page-break-before', 'page-break-after', 'page-break-inside'
      • 13.3.2 Использование именованных страниц: 'page'
      • 13.3.3 Разрывы внутри элементов: 'orphans', 'widows'
      • 13.3.4 Допустимые разрывы страниц
      • 13.3.5 Форсированные разрывы страниц
      • 13.3.6 "Наилучшие" разрывы страниц
    • 13.4 Каскадирование в контексте страницы

  • 14 Цвета и Фон
    • 14.1 Цвет переднего плана: свойство 'color'
    • 14.2 Фон
      • 14.2.1 Свойства фона: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position' и 'background'
    • 14.3 Коррекция цветовой гаммы
  • 15 Шрифт
    • 15.1 Введение
    • 15.2 Спецификация шрифта
      • 15.2.1 Свойства спецификации шрифта
      • 15.2.2 Семейства шрифтов: свойство 'font-family'
      • 15.2.3 Стили шрифта: свойства 'font-style', 'font-variant', 'font-weight' и 'font-stretch'
      • 15.2.4 Размер шрифта: свойства 'font-size' и 'font-size-adjust'
      • 15.2.5 Сокращения для свойств шрифта: свойство 'font'
      • 15.2.6 Общие семейства шрифтов
        • serif
        • sans-serif
        • cursive
        • fantasy
        • monospace
    • 15.3 Выбор шрифта
      • 15.3.1 Описание Шрифта и @font-face
      • 15.3.2 Дескрипторы для Выбора Шрифта: 'font-family', 'font-style', 'font-variant', 'font-weight', 'font-stretch' и 'font-size'
      • 15.3.3 Дескрипторы для Квалификации Данных Шрифта: 'unicode-range'
      • 15.3.4 Дескриптор для Числовых Значений: 'units-per-em'
      • 15.3.5 Дескриптор для ссылки: 'src'
      • 15.3.6 Дескрипторы Подбора: 'panose-1', 'stemv', 'stemh', 'slope', 'cap-height', 'x-height', 'ascent' и 'descent'
      • 15.3.7 Дескрипторы Синтеза: 'widths', 'bbox' и 'definition-src'
      • 15.3.8 Дескрипторы Выравнивания: 'baseline', 'centerline', 'mathline' и 'topline'
      • 15.3.9 Примеры
    • 15.4 Характеристики Шрифта
      • 15.4.1 Введение
      • 15.4.2 Полное имя шрифта
      • 15.4.3 Единицы измерения em-квадрат/em square
      • 15.4.4 Центральная Базовая Линия
      • 15.4.5 Кодировка Шрифта
      • 15.4.6 Имя семейства шрифтов
      • 15.4.7 Ширина глифов
      • 15.4.8 Ширина горизонтальной основы
      • 15.4.9 Высота глифов верхнего регистра
      • 15.4.10 Высота глифов нижнего регистра
      • 15.4.11 Нижняя Базовая Линия
      • 15.4.12 Математическая Базовая Линия
      • 15.4.13 Максимальный ограничивающий бокс
      • 15.4.14 Максимальная неакцентированная высота
      • 15.4.15 Максимальная неакцентированная глубина
      • 15.4.16 Число Panose-1
      • 15.4.17 Диапазон символов ISO 10646
      • 15.4.18 Верхняя Базовая Линия
      • 15.4.19 Ширина вертикальной основы
      • 15.4.20 Угол вертикального наклона
    • 15.5 Алгоритм совпадения шрифтов
      • 15.5.1 Отображение значений ширины шрифтов в имена шрифтов
      • 15.5.2 Примеры совпадения шрифтов

  • 16 Текст
    • 16.1 Отступы: свойство 'text-indent'
    • 16.2 Выравнивание: свойство 'text-align'
    • 16.3 Декоративные эффекты
      • 16.3.1 Подчёркивание, надчёркивание, перечёркивание и мигание: свойство 'text-decoration'
      • 16.3.2 Оттенение текста: свойство 'text-shadow'
    • 16.4 Расстояния между буквами и словами: свойства 'letter-spacing' и 'word-spacing'
    • 16.5 Капитализация: свойство 'text-transform'
    • 16.6 Пробел: свойство 'white-space'

  • 17 Таблицы
    • 17.1 Введение
    • 17.2 Табличная модель CSS
      • 17.2.1 Анонимные объекты таблицы
    • 17.3 Селекторы столбцов
    • 17.4 Таблицы в модели визуального форматирования
      • 17.4.1 Позиция и выравнивание заголовка
    • 17.5 Вид содержимого таблицы
      • 17.5.1 Слои и прозрачность таблицы
      • 17.5.2 Алгоритмы ширины таблицы: свойство 'table-layout'
        • Фиксированный вывод таблицы
        • Автоматический вывод таблицы
      • 17.5.3 Алгоритмы высоты таблицы
      • 17.5.4 Горизонтальное выравнивание в столбце
      • 17.5.5 Динамические эффекты рядов и столбцов
    • 17.6 Рамки
      • 17.6.1 Модель раздельных рамок
        • Обрамление пустых ячеек: свойство 'empty-cells'
      • 17.6.2 Модель сжимающихся рамок
        • Разрешение конфликтов рамок
      • 17.6.3 Стили рамок
    • 17.7 Звуковое представление таблиц
      • 17.7.1 Говорящие заголовки: свойство 'speak-header'

  • 18 Интерфейс пользователя
    • 18.1 Курсоры: свойство 'cursor'
    • 18.2 Предпочтительные цвета пользователя
    • 18.3 Предпочтительные шрифты пользователя
    • 18.4 Динамические контуры: свойство 'outline'
      • 18.4.1 Контуры и фокус
    • 18.5 Увеличение

  • 19 "Звуковые" таблицы стилей
    • 19.1 Введение
    • 19.2 Свойства силы звука: 'volume'
    • 19.3 Речевые свойства: 'speak'
    • 19.4 Свойства паузы: 'pause-before', 'pause-after' и 'pause'
    • 19.5 Свойства реплик-подсказок: 'cue-before', 'cue-after' и 'cue'
    • 19.6 Свойства микширования: 'play-during'
    • 19.7 Пространственные свойства: 'azimuth' и 'elevation'
    • 19.8 Свойства голосовых характеристик: 'speech-rate', 'voice-family', 'pitch', 'pitch-range', 'stress', и 'richness'
    • 19.9 Свойства речи: 'speak-punctuation' и 'speak-numeral'

  • Приложение A. Образец таблицы стиля для HTML 4.0

  • Приложение B. Изменения по сравнению с CSS1
    • B.1 Новая функциональность
    • B.2 Обновлённые описания
    • B.3 Семантические изменения по сравнению с CSS1

  • Приложение C. Замечания по реализации и выполнению для шрифтов
    • C.1 Справочник терминологии шрифтов
    • C.2 Выбор шрифта
    • C.3 Значения Чисел Panose
    • C.4 Вычисление Диапазонов Unicode для TrueType
    • C.5 Автоматическая генерация дескриптора

  • Приложение D. Грамматика CSS2
    • D.1 Грамматика
    • D.2 Лексический сканер
    • D.3 Сравнение лексического разбора в CSS2 и в CSS1

  • Приложение E. Ссылки
    • E.1 Нормативные ссылки
    • E.2 Информативные ссылки

  • Приложение F. Индекс свойств

  • Приложение G. Индекс дескрипторов

  • Приложение H. Индекс

Внимание !

  • Официальная нормативная версия этой спецификации возможна только на английском языке и находится по адресу: http://www.w3.org/TR/1998/REC-CSS2-19980512
  • Данный перевод НЕ является официальным документом W3C.
  • Все Авторские Права Принадлежат W3C.
  • Данный документ может содержать ошибки перевода и опечатки.

Авторские права © 1998 W3C (MIT, INRIA, Keio ), Все Права Зарезервированы.


Индекс

Приложение H.
Индекс.

Русский алфавит: Английский Алфавит

А Б В Г Д Е З И К Л М Н О П Р С Т У Ф Ц Ч Ш Э Я

А

  • абсолютные размеры, 1
     абсолютно позиционированный элемент, 1

  • абстрактный глиф, 1
  • автоматическая нумерация, 1
  • авторская утилита, 1
  • анонимный, 1
  • анонимные инлайн-боксы, 1
  • аспект, значение, 1
  • at-правило, 1
  • at-правила, 1, 2
  • атрибут, 1 Русский Алфавит

Б

  • блок, 1
  • блок объявлений, 1
  • бокс
    • run-in, 1
    • высота, 1
    • высота содержимого, 1
    • заполнение, 1
    • переполнение, 1
    • поля, 1
    • рамка, 1
    • содержимое, 1
    • ширина, 1
    • ширина содержимого, 1
  • бокс блока, 1
  • основной, 1 Русский Алфавит

В

  • вектор кодирования, 1
  • вертикальные поля, 1
  • 'визуальный', группа носителей, 1
  • внешний край, 1
  • внутренние размеры, 1
  • внутренний край, 1
  • вперёд-совместимый разбор, 1
  • выводимое содержимое, 1
  • вычисленное значение, 1 Русский Алфавит

Г

  • габарит, 1
  • генерируемое содержимое, 1
  • глиф, 1
  • горизонтальные поля, 1 Русский Алфавит

Д

  • двунаправленность (bidi), 1
  • двухкамерный, 1
    • определение, 1
  • действующая таблица стилей, 1
  • дерево документа, 1
  • документ-источник, 1
  • ДОЛЖЕН, 1
  • дочерний, 1 Русский Алфавит

Е

  • escape-последовательности, 1 Русский Алфавит

З

  • "зависающие заглавные", 1
  • замещаемый элемент, 1
  • заполнение
    • в боксе, 1
  • звуковая иконка, 1
  • 'звуковой', группа носителей, 1
  • знак "крестик", 1
  • знаки обрезки, 1
  • значение, 1 Русский Алфавит

И

  • идентификатор, 1
  • Идентификатор Ресурса (URI), 1
  • игнорируется, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27
  • инлайн-элемент, 1
  • 'интерактивный', группа носителей, 1 Русский Алфавит

К

  • канва, 1, 2
  • каскад, 1
  • код языка, 1, 2
  • кодировка символов, 1
    • по умолчанию, 1
    • определение пользовательским агентом, 1
  • комбинатор, 1, 2
  • комментарии, 1
  • компактный бокс, 1
  • контекст страницы, 1
  • контекст стэка, 1
  • контекст форматирования, 1
  • контуры, 1
  • корневой контекст стэка, 1
  • край заполнения, 1
  • край поля, 1
  • край рамки, 1
  • край содержимого, 1 Русский Алфавит

Л

  • лексический сканер, 1
  • лигатуры, 1
  • лист, 1
  • локальный контекст стэка, 1 Русский Алфавит

М

  • маркёры, 1
  • медиа-зависимые правила import, 1
  • множественные объявления, 1
  • модель визуального форматирования, 1
  • МОЖЕТ, 1
  • моноширинный, определение, 1 Русский Алфавит

Н

  • наборы правил, 1
  • начальные заглавные, 1
  • начальный содержащий блок, 1
  • начальное значение, 1
  • неверное, 1
  • НЕ ДОЛЖЕН, 1
  • НЕОБХОДИМ, 1
  • НЕ ОБЯЗАН, 1
  • НЕОБЯЗАТЕЛЕН (ПО ВЫБОРУ), 1
  • 'непрерывный', группа носителей, 1
  • новая строка, 1
  • носитель, 1
  • группы, 1
  • тип, 1 Русский Алфавит

О

  • область видимости, 1
  • область страницы, 1
  • объём, 1
  • объявление, 1
  • ОБЯЗАН, 1
  • операторы, 1
  • 'осязательный', группа носителей, 1
  • ОТД, 1, 2
  • относительные единицы измерения, 1
  • относительное позиционирование, 1
  • отображение по частям (прогрессирующее), 1
  • отображение элементов в таблицу, 1 Русский Алфавит

П

  • ПА, 1
  • переполняется, 1
  • пиксел, 1
  • позиционированный элемент/бокс, 1
  • поле
    • горизонтальное, 1
    • бокса, 1
    • вертикальное, 1
  • полугабарит, 1
  • пользовательский агент, 1
  • поплавок, правила поведения, 1
  • порт просмотра, 1
  • последовательности escape, 1
  • последующий элемент, 1
  • потомок, 1
  • по умолчанию
    • кодировка символов, 1
  • предок, 1
  • простой селектор, 1
  • псевдокласс
    • :first, 1
    • :left, 1
    • :right, 1
  • псевдоклассы, 1
    • :active, 1, 2
    • :focus, 1
    • :hover, 1
    • :lang, 1
    • :link, 1, 2
    • :visited, 1, 2
  • псевдоэлементы, 1
    • :after, 1, 2
    • :before, 1, 2
    • :first-letter, 1
    • :first-line, 1, 2
  • пустой, 1 Русский Алфавит

Р

  • раздельные рамки, 1
  • рамка
    • бокса, 1
  • 'растровый', группа носителей, 1
  • реальное значение, 1
  • РЕКОМЕНДУЕТСЯ, 1
  • 'решётка', группа носителей, 1
  • родительский, 1
  • родственник, 1 Русский Алфавит

С

  • свойства, 1
  • селектор дочерних элементов, 1
  • селектор, 1, 2, 3, 4
    • совпадение, 1
    • субъект, 1
  • селектор страницы, 1
  • селектор типа, 1
  • селекторы потомков, 1
  • сжатие полей, 1
  • сжимаемая область, 1
  • символ, 1
  • совпадает, 1
  • совпадения, разделённые пробелами, 1
  • содержащий блок, 1, 2, 3
    • начальный, 1
  • содержимое, 1
  • бокса, 1
    • выводимое, 1
  • сокращённое свойство, 1, 2, 3
  • соответствие, 1, 2, 3, 4, 5, 6, 7, 8
  • совпадения,
  • список, разделённых дефисами, 1
  • смысловое, 1
  • специфицированное значение, 1
  • список
  • свойства, 1
  • страничная модель, 1
  • 'страничный', группа носителей, 1
  • страничный бокс, 1
  • 'статичный', группа носителей, 1
  • строка, 1
  • строчный бокс, 1, 2
  • структура форматирования, 1
  • субъект (селектора), 1
  • сущность сообщения, 1
  • схема позиционирования, 1
  • счётчики, 1 Русский Алфавит

Т

  • таблица
  • инлайн-уровня, 1
  • стилей по умолчанию, 1
  • таблица стилей, 1
  • таблицы, 1
  • точное совпадение, 1 Русский Алфавит

У

  • универсальный селектор, 1
  • уровень в стэке, 1
  • условный импорт, 1
  • устройство чтения с экрана, 1 Русский Алфавит

Ф

  • фиктивные тэги, последовательность, 1, 2, 3
  • фокус, 1
  • форсированный обрыв строки, 1 Русский Алфавит

Ц

  • цвет, 1 Русский Алфавит

Ч

  • чувствительность к регистру, 1 Русский Алфавит

Ш

  • шрифт, 1
  • данные, 1
  • загрузка, 1
  • набор (шрифтов), 1
  • однокамерный, 1, 2
    • определение, 1
  • определение ресурса, 1
  • описание, 1
  • полное имя, 1
  • семейство, 1
  • синтез, 1
  • системные шрифты, 1
  • совпадение имени, 1
  • таблица кодировки, 1 Русский Алфавит

Э

  • элемент, 1
    • внутренний элемент таблицы, 1
    • корневой/root, 1
    • последующий, 1
    • предшествующий, 1
    • таблицы, 1
  • уровня блока, 1 Русский Алфавит

Я

  • язык документа, 1
  • язык (человеческий), 1

Английский алфавит: Русский Алфавит

A B C D E F G H I K L M N O P Q R S T U V W X Z

Символы и мнемоники:

  • :active, 2, 3
  • :after, 1, 2
  • :before, 1, 2, 3
  • :first, 1
  • :first-child, 1
  • :first-letter, 1
  • :first-line, 1
  • :focus, 1
  • :hover, 1
  • :lang, 1
  • :left, 1
  • :link, 1, 2
  • :right, 1
  • :visited, 1, 2
  • =, 1
  • ~=, 1
  • |=, 1 Английский Алфавит

  • @charset, 1
  • @font-face, 1, 2, 3, 4, 5, 6, 7
  • @import, 1, 2, 3
  • @media, 1, 2, 3, 4
  • @page, 1 Английский Алфавит

a

  • <absolute-size>
    • определение 1
  • :active (псевдокласс), 1, 2
  • :after, 1
  • <angle>, 1, 2
    • определение, 1
  • armenian, 1
  • 'ascent' (дескриптор), 1
  • at-rule, 1
  • attr(), 1
  • 'azimuth', 1 Английский Алфавит

b

  • 'background', 1
  • 'background-attachment', 1
  • 'background-color', 1
  • 'background-image', 1
  • 'background-position', 1
  • 'background-repeat', 1
  • backslash escapes, 1
  • 'baseline' (дескриптор), 1
  • 'bbox' (дескриптор), 1
  • before, 1
  • 'block', определение, 1
  • 'border', 1
  • 'border-bottom', 1
  • 'border-bottom-color', 1
  • 'border-bottom-style', 1
  • 'border-bottom-width', 1
  • 'border-collapse', 1
  • 'border-color', 1
  • 'border-left', 1
  • 'border-left-color', 1
  • 'border-left-style', 1
  • 'border-left-width', 1
  • 'border-right', 1
  • 'border-right-color', 1
  • 'border-right-style', 1
  • 'border-right-width', 1
  • 'border-spacing', 1
  • <border-style>, 1
  • <border-style>, определение, 1
  • 'border-style', 1
  • 'border-top', 1
  • 'border-top-color', 1
  • 'border-top-style', 1
  • 'border-top-width', 1
  • <border-width>
    • определение, 1
  • 'border-width', 1
  • <bottom>
    • определение, 1
  • 'bottom', 1 Английский Алфавит

c

  • 'cap-height' (дескриптор), 1
  • 'caption-side', 1
  • 'centerline' (дескриптор), 1
  • circle, 1
  • cjk-ideographic, 1
  • 'clear', 1
  • 'clip', 1
  • close-quote, 1, 2
  • <color>, 1, 2
    • определение, 1
  • 'color', 1
  • compact, 1
  • 'compact', определение, 1
  • 'content', 1
  • <counter>, 1
  • <counter>, определение, 1
  • counter(), 1
  • 'counter-increment', 1
  • 'counter-reset', 1
  • 'cue', 1
  • 'cue-after', 1
  • 'cue-before', 1
  • cursive, определение, 1
  • 'cursor', 1 Английский Алфавит

d

  • 'dashed', 1, 2
  • decimal, 1
  • decimal-leading-zero, 1
  • 'definition-src' (дескриптор), 1
  • 'descent' (дескриптор), 1
  • 'direction', 1
  • disc, 1
  • 'display', 1
  • 'dotted', 1, 2
  • 'double', 1, 2 Английский Алфавит

e

  • 'elevation', 1
  • em (единица измерения), 1
  • em square (em-квадрат), 1, 2
  • 'empty-cells', 1
  • ex (единица измерения), 1 Английский Алфавит

f

  • <family-name>
    • определение, 1
  • fantasy, определение, 1
  • first-child, 1
  • first-letter, 1
  • first-line, 1
  • 'float', 1
  • focus (псевдокласс), 1
  • 'font', 1
  • <font-description>
    • определение, 1
  • <font-face-name>
    • определение, 1
  • 'font-family', 1
  • 'font-family' (дескриптор), 1
  • 'font-size', 1
  • 'font-size' (дескриптор), 1
  • 'font-size-adjust', 1
  • 'font-stretch', 1
  • 'font-stretch' (дескриптор), 1
  • 'font-style', 1
  • 'font-style' (дескриптор), 1
  • 'font-variant', 1
  • 'font-variant' (дескриптор), 1
  • 'font-weight', 1
  • 'font-weight' (дескриптор), 1
  • <frequency>, 1
    • определение, 1
  • full font name, 1 Английский Алфавит

g

  • <generic-family>
    • определение, 1
  • <generic-voice>, определение, 1
  • georgian, 1
  • 'groove', 1, 2 Английский Алфавит

h

  • hebrew, 1
  • 'height', 1
  • 'hidden, 1
  • 'hidden', 1
  • hiragana, 1
  • hiragana-iroha, 1
  • hover (псевдокласс), 1 Английский Алфавит

i

  • important, 1
  • inherit, определение, 1
  • 'inline', определение, 1
  • 'inline-table', 1
  • 'inset', 1, 2
  • <integer>, 1
    • определение, 1
  • invert, 1
  • iso-10646, 1
  • Italic, определение, 1 Английский Алфавит

k

  • katakana, 1
  • katakana-iroha, 1 Английский Алфавит

l

  • lang (псевдокласс), 1
  • <left>
    • определение, 1
  • 'left', 1
  • <length>, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
    • определение, 1
  • 'letter-spacing', 1
  • 'line-height', 1
  • link (псевдокласс), 1, 2
  • 'list-item', определение, 1
  • 'list-style', 1
  • 'list-style-image', 1
  • 'list-style-position', 1
  • 'list-style-type', 1
  • LL(1), 1
  • lower-greek, 1
  • lower-latin, 1
  • lower-roman, 1 Английский Алфавит

m

  • 'margin', 1
  • 'margin-bottom', 1
  • 'margin-left', 1
  • 'margin-right', 1
  • 'margin-top', 1
  • <margin-width>
    • определение, 1
  • 'marker', определение, 1
  • 'marker-offset', 1
  • 'marks', 1
  • 'mathline' (дескриптор), 1
  • 'max-height', 1
  • 'max-width', 1
  • 'min-height', 1
  • 'min-width', 1
  • monospace, определение, 1 Английский Алфавит

n

  • no-close-quote, 1, 2
  • no-open-quote, 1, 2
  • 'none'
    • стиль рамки, 1, 2
    • в 'display', 1
  • <number>, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
    • определение, 1 Английский Алфавит

o

  • open-quote, 1, 2
  • 'orphans', 1
  • 'outline', 1
  • 'outline-color', 1
  • 'outline-style', 1
  • 'outline-width', 1
  • 'outset', 1, 2
  • 'overflow', 1 Английский Алфавит

p

  • 'padding', 1
  • 'padding-bottom', 1
  • 'padding-left', 1
  • 'padding-right', 1
  • 'padding-top', 1
  • <padding-width>
    • определение, 1
  • 'page', 1
  • 'page-break-after', 1
  • 'page-break-before', 1
  • 'page-break-inside', 1
  • Panose-1, 1
  • panose-1, 1
  • 'panose-1' (дескриптор), 1
  • 'pause', 1
  • 'pause-after', 1
  • 'pause-before', 1
  • <percentage>, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
    • определение, 1
  • 'pitch', 1
  • 'pitch-range', 1
  • pixel, 1
  • 'play-during', 1
  • 'position', 1 Английский Алфавит

q

  • quad width, 1
  • 'quotes', 1 Английский Алфавит

r

  • <relative-size>
    • определение, 1
  • 'richness', 1
  • 'ridge', 1, 2
  • <right>
    • определение, 1
  • 'right', 1
  • root, 1
  • run-in, 1
  • 'run-in', определение, 1 Английский Алфавит

s

  • sans-serif, определение, 1
  • serif, определение, 1
  • <shape>
    • определение, 1
  • 'size', 1
  • 'slope' (дескриптор), 1
  • 'solid', 1, 2
  • 'speak', 1
  • 'speak-header', 1
  • 'speak-numeral', 1
  • 'speak-punctuation', 1
  • <specific-voice>
    • определение, 1
  • 'speech-rate', 1
  • square, 1
  • 'src' (дескриптор), 1
  • 'stemh' (дескриптор), 1
  • 'stemv' (дескриптор), 1
  • 'stress', 1
  • string, 1
  • <string>, 1, 2, 3, 4, 5
  • <string>, определение, 1 Английский Алфавит

t

  • table, 1
  • 'table', 1
  • table-caption, 1
  • 'table-caption', 1
  • table-cell, 1
  • 'table-cell', 1
  • table-column, 1
  • 'table-column', 1
  • table-column-group, 1
  • 'table-column-group', 1
  • table-footer-group, 1
  • 'table-footer-group', 1
  • table-header-group, 1
  • 'table-header-group', 1
  • 'table-layout', 1
  • table-row, 1
  • 'table-row', 1
  • table-row-group, 1
  • 'table-row-group', 1
  • 'text-align', 1
  • 'text-decoration', 1
  • 'text-indent', 1
  • 'text-shadow', 1
  • 'text-transform', 1
  • text/css, 1
  • <time>, 1
    • определение, 1
  • <top>
    • определение, 1
  • 'top', 1
  • 'topline' (дескриптор), 1 Английский Алфавит

u

  • unicode, 1
  • 'unicode-bidi', 1
  • 'unicode-range' (дескриптор), 1
  • Uniform Resource Locator (URL), 1
  • Uniform Resource Name (URN), 1
  • 'units-per-em' (дескриптор), 1
  • upper-latin, 1
  • upper-roman, 1
  • <urange>
    • определение, 1
  • URI (Uniform Resource Identifier), 1
  • <uri>, 1, 2, 3, 4, 5, 6
    • определение, 1
  • URL (Uniform Resource Locator), 1
  • URN (Uniform Resource Name), 1 Английский Алфавит

v

  • 'vertical-align', 1
  • 'visibility', 1
  • visited (псевдокласс), 1, 2
  • 'voice-family', 1
  • 'volume', 1 Английский Алфавит

w

  • 'white-space', 1
  • 'widows', 1
  • 'width', 1
  • 'widths' (дескриптор), 1
  • 'word-spacing', 1 Английский Алфавит

x

  • x-высота, 1
  • 'x-height' (дескриптор), 1

z

  • 'z-index', 1 Английский Алфавит


Полное описание поведения полей/рамок в разделённом инлайн-боксе

Полное описание примера поведения полей/рамок в разделённом инлайн-боксе

На диаграмме показано поведение полей, рамок, и заполнения в местах разделения инлайн-бокса.

Изображён вывод примера документа HTML, предшествующего диаграмме в основном документе, параграф "Several emphasized words appear here." Инлайн-бокс, содержащий слова "emphasized text", разделён между словами. В точке разделения заполнение, рамки (выделенные пунктиром) и поля не отображаются.


CSS2 Введение

2 CSS2. Введение.

Содержание

  • 2.1 Краткое пособие CSS2 для HTML
  • 2.2 Краткое пособие CSS2 для XML
  • 2.3 Модель процесса CSS2
    • 2.3.1 Канва
    • 2.3.2 Модель адресации CSS2
  • 2.4 Принципы дизайна CSS

2.1 Краткое пособие CSS2 для HTML

В этом пособии мы покажем, как можно быстро создать простые таблицы стилей.
Для использования этого пособия необходимо немного знать HTML (см. [HTML40]) и некоторые базовые термины настольных публикаций.

Вот небольшой документ HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

Чтобы установить голубой цвет текста элемента H1, можно написать такое правило CSS:

  H1 { color: blue }

Правило CSS состоит из двух главных частей: селектора ('H1') и объявления ('color: blue'). Объявление имеет две части: свойство ('color') и значение ('blue'). Поскольку в предыдущем примере делается попытка использовать только одно из свойств, необходимое для отображения документа HTML, он может быть квалифицирован как таблица стилей. В комбинации с другими таблицами стилей (возможность комбинировать таблицы стилей является одним из фундаментальных свойств CSS) оно (свойство) определит конечный вид документа.

Спецификация HTML 4.0 определяет, как правила таблиц стилей могут быть специфицированы для документов HTML: или внутри документа HTML, или в таблицах стилей. Чтобы поместить в документ таблицу стилей, используйте элемент STYLE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

Для максимальной гибкости мы рекомендуем, чтобы авторы специфицировали внешние таблицы стилей; они могут быть изменены без модификации документа-источника HTML, а также могут раздельно использоваться несколькими документами. Чтобы сослаться на внешнюю таблицу стилей, Вы можете использовать элемент LINK:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <LINK rel="stylesheet" href="bach.css" type="text/css">
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

Элемент LINK специфицирует:

  • тип гиперссылки: "stylesheet";
  • размещение таблицы стилей: в атрибуте "ref";
  • тип таблицы стилей, на которую ссылаются: "text/css".

Чтобы продемонстрировать тесную взаимосвязь между таблицей стилей и структурной разметкой, мы продолжим использовать элемент STYLE в этом пособии. Давайте добавим больше цветов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    BODY { color: red }
    H1 { color: blue }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

Таблица стилей теперь содержит два правила: первое устанавливает цвет элемента BODY в 'red', а второе - цвет элемента H1 в 'blue'. Поскольку для элемента P не специфицирован цвет, он будет наследовать цвет от своего элемента-предка, а именно - от BODY. Элемент H1 является также дочерним элементом элемента BODY, но второе правило переопределяет наследуемое значение. В CSS часто возникают такие конфликты между различными значениями, и данная спецификация описывает, как их разрешить.

В CSS2 имеется более 100 различных свойств, в том числе - 'color'.
Рассмотри некоторые другие:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    BODY {
      font-family: "Gill Sans", sans-serif;
      font-size: 12pt;
      margin: 3em;
    }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

Первое, что нужно отметить, это несколько объявлений, сгруппированных внутри блока, заключённого в фигурные скобки ({...}) и разделённых знаком точка с запятой, хотя последнее объявление может также заканчиваться точкой с запятой.

Первое объявление элемента BODY устанавливает семейство шрифтов "Gill Sans". Если этот шрифт недоступен, ПА (часто называемый "браузер") будет использовать семейство шрифтов 'sans-serif', которое является одним из пяти семейств шрифтов, известных всем ПА. Дочерние элементы элемента BODY унаследуют значение свойства 'font-family'.

Второе объявление устанавливает размер шрифта элемента BODY в 12 пунктов. Единица измерения "пункт" используется обычно в типографской печати для обозначения размеров шрифта и других размеров. Это пример абсолютных единиц измерения, которые не определяются относительно окружения.

Третье объявление использует относительные единицы измерения, которые определяются относительно своего окружения. Единица "em" относится к размеру шрифта элемента. В нашем случае поля вокруг элемента BODY шире размера шрифта в три раза.

2.2 Краткое пособие CSS2 для XML

CSS может использоваться с любым структурированным форматом документа, например, с приложениями eXtensible Markup Language [XML10]. На самом деле XML намного больше зависит от таблиц стилей, чем HTML, поскольку авторы могут создавать свои собственные элементы, которые не известны ПА и не могут ими выводиться.

Вот простой фрагмент XML:

<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

Чтобы вывести данный фрагмент в виде документа, мы обязаны сначала объявить, какие элементы являются элементами инлайн-уровня (т.е. не вызывают разрывов строк) и какие - уровня блока (т.е. вызывают разрывы строк).

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

Первое правило объявляет INSTRUMENT как инлайн, а второе правило с его списком разделённых запятыми селекторов объявляет все другие элементы как элементы уровня блока.

Одним из вариантов связи таблицы стилей с документом XML является использование инструкций процесса:

<?XML:stylesheet type="text/css" href="bach.css"?>
<ARTICLE>
  <HEADLINE>Fredrick the Great meets Bach</HEADLINE>
  <AUTHOR>Johann Nikolaus Forkel</AUTHOR>
  <PARA>
    One evening, just as he was getting his
    <INSTRUMENT>flute</INSTRUMENT> ready and his
    musicians were assembled, an officer brought him a list of
    the strangers who had arrived.
  </PARA>
</ARTICLE>

Визуальный ПА может отформатировать вышеприведённый пример так:

Example rendering [D]

Обратите внимание, что слово "flute" остаётся внутри параграфа, поскольку это содержимое инлайн-элемента INSTRUMENT.

Тем не менее, текст ещё не выглядит так, как Вы могли бы ожидать. Например, шрифт заголовка должен быть крупнее, чем остальной текст, и Вам может понадобиться вывести имя автора курсивом:

INSTRUMENT { display: inline }
ARTICLE, HEADLINE, AUTHOR, PARA { display: block }
HEADLINE { font-size: 1.3em }
AUTHOR { font-style: italic }
ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }

Визуальный ПА может сформатировать этот пример так:

Example rendering [D]

Добавление других правил в таблицу стилей позволить Вам сделать представление документа ещё более интересным.

2.3 Модель процесса CSS2

Этот раздел представляет одну из возможных моделей того, как работают ПА, поддерживающие CSS. Это лишь концептуальная модель; конкретные реализации могут варьироваться.

ПА в этой модели обрабатывает источник, выполняя следующие шаги:

  1. Разбирает документ-источник и создаёт дерево документа.
  2. Идентифицирует тип носителя.
  3. Запрашивает все таблицы стилей, ассоциированные с документом, которые специфицированы для целевого типа носителя.
  4. Помечает каждый элемент дерева документа назначением одиночного значения каждому свойству, которое может быть применено к целевому типу носителя. Значения свойств устанавливаются в соответствии с механизмами, описанными в разделе каскадирование и наследование.

    Частично расчёт значений зависит от алгоритма форматирования, соответствующего целевому типу носителя. Например, если целевой носитель - это экран, то ПА применяют модель визуального форматирования. Если целевой носитель - это страница для печати, то ПА применяют страничную модель. Если целевой носитель - это устройство звукового вывода (например, речевой синтезатор), то ПА применяют модель звукового представления.

  5. На базе размеченного дерева документа генерирует структуру форматирования. Часто структура форматирования напоминает дерево документа, но может также и слегка отличаться, особенно если авторы используют псевдоэлементы и генерируемое содержимое. Во-первых, структура форматирования вообще не должна иметь "очертания дерева" - природа структуры зависит от реализации. Во-вторых, структура форматирования может содержать информации больше или меньше, чем дерево документа. Например, если элемент дерева документа имеет значение 'none' для свойства 'display', то этот элемент не будет ничего генерировать в структуре форматирования. Элемент list, с другой стороны, может генерировать больше информации в структуре форматирования: содержимое элемента list и стилевую информацию (например, изображение для маркёра).

    Обратите внимание, что ПА CSS не изменяет дерево документа на этом этапе. И особенно, что содержимое, генерируемое в связи с таблицы стилей, не возвращается процессору языка документа (например, для повторного разбора).

  6. Переносит структуру форматирования на целевой носитель (например, печатает результат, отображает его на экране, представляет в виде речевого потока и т.д.).

Шаг 1 находится вне пределов действия данной спецификации (см., например, [DOM]).

Шаги 2-5 адресуются основным объёмом данной спецификации.

Шаг 6 находится вне пределов действия данной спецификации.

2.3.1 Канва

Для всех носителей термин канва описывает "пространство, где выводится сформатированная структура". Канва бесконечна по каждому измерению, но представление обычно производится в пределах ограниченной области канвы, установленной ПА в соответствии с целевым носителем. Например, вывод ПАгентами на экран обычно требует наличия минимальной ширины и выбора начальной ширины на базе размеров порта просмотра. Вывод ПАгентами на страницу обычно требует ограничения ширины и высоты. Звуковые ПА могут предполагать ограничения звукового пространства, но не времени.

2.3.2 Модель адресации CSS2

Селекторы и свойства CSS2 позволяют обращаться из таблиц стилей к следующим частям документа или ПАгента:

  • Элементам дерева документа и определённым их взаимоотношениям (см. раздел селекторы).
  • Атрибутам элементов дерева документа и значениям этих атрибутов (см. раздел селекторы атрибутов).
  • Некоторым частям содержимого элемента (см. псевдоэлементы :first-line и :first-letter.
  • Элементам дерева документа, находящимся в определённом состоянии (см. раздел псевдоклассы).
  • Некоторым аспектам канвы при выводе документа.
  • Некоторой системной информации (см. раздел интерфейс пользователя).

2.4 Принципы дизайна CSS

CSS2, а до них - CSS1, базируются на наборе принципов дизайна:

  • Совместимость вперёд и обратная. ПА CSS2 понимают таблицы стилей CSS1. ПА CSS1 могут читать таблицы стилей CSS2 и отбрасывать те части, которые они не понимают. Также ПА, не поддерживающие CSS, могут отображать документы со стилями. Конечно, стилистические приёмы, возможные в CSS, не будут выводиться, но всё содержимое будет представлено.

  • Дополнение структурированных документов. Таблицы стилей дополняют структурированные документы (например, приложения HTML и XML), предоставляя стилистическую информацию для размеченного текста. Должна иметься возможность легко изменять таблицы стилей без или с минимальным влиянием на разметку.

  • Независимость от изготовителя, платформы и устройства. Таблицы стилей делают возможным создание документов, не зависящих от изготовителя, платформы и устройства. Таблицы стилей сами по себе также не зависят от изготовителя, платформы и устройства, но CSS2 позволяют Вам назначить таблицу стилей группе устройств (например, принтеров).

  • Удобство обслуживания. Ссылаясь из документа на таблицы стилей, web-мастера могут упростить обслуживание сайта и добиться целостного вида и содержания всего сайта. Например, если изменяется цвет фона сайта организации, нужно будет изменить лишь один файл.

  • Простота. CSS2 сложнее, чем CSS1, но остаётся простым языком стилей, доступным для чтения и понимания человеком. Свойства CSS не зависят одно от другого, чтобы иметь в будущем возможности для расширения, и поэтому обычно имеется лишь один способ для достижения определённого эффекта.

  • Скорость работы сети. CSS предоставляют компактные способы представления содержимого. По сравнению с файлами изображений или аудиофайлами, которые часто используются авторами для получения определённых эффектов представления, таблицы стилей чаще всего уменьшают объёмы содержимого. Требуется также меньше сетевых соединений, что увеличивает пропускную способность сети.

  • Гибкость. CSS может применяться в содержимом разными способами. Ключевым является возможность каскадирования стилевой информации, специфицированной в таблице стилей по умолчанию(в ПА), пользовательских таблицах стилей, связанных таблицах стилей, шапке документа и атрибутах элементов, формирующих тело документа.

  • Богатство возможностей. Предоставление авторам большого набора эффектов отображения увеличивает разнообразие Web. Дизайнерам была необходима функциональность, которая уже использовалась в настольных приложениях и слайд-презентациях. Некоторые из требуемых эффектов конфликтуют с независимостью от конкретных устройств, но CSS2 явился дальнейшим шагом на пути удовлетворения запросов дизайнеров.

  • Связи с другими языками. Набор свойств CSS, описанный в этой спецификации, образует последовательную модель форматирования для визуального и звукового представления. Эта модель форматирования может быть доступна из языка CSS, но возможны также связи с другими языками. Например, программа JavaScript может динамически изменить значение свойства 'color' определённого элемента.

  • Доступность. Некоторые возможности CSS сделают Web более доступным для пользователей с физическими проблемами:

    • Свойства для управления выводом шрифта позволяют авторам исключить недоступность растрированных текстовых изображений.
    • Свойства позиционирования позволяют авторам исключить трюки с разметкой (например, невидимые изображения) для целей изменения вывода.
    • Семантика правил !important означает, что пользователи с особыми требованиями к представлению могут переопределять установки авторских таблиц стилей.
    • Новое значение 'inherit' для всех свойств улучшает каскадирование и даёт возможность более лёгкой и точной настройки стиля.
    • Улучшенная поддержка носителей, включая группы носителей и брайль-носители, рельефные и tty типы носителей, позволит пользователям и авторам создавать страницы для данных устройств.
    • Звуковые свойства дают возможность управлять речевым и аудиовыводом.
    • Селекторы атрибутов, функция 'attr()' function и свойство 'content' дают возможность доступа к альтернативному содержимому.
    • Счётчики и нумерация разделов/параграфов может улучшить навигацию по документам и сохранить пространство отступов (важно для байль-устройств). Свойства 'word-spacing' и 'text-indent' исключают надобность в излишнем свободном пространстве в документе.

    Примечание. За дополнительной информацией о разработке доступных документов с использованием CSS и HTML обратитесь, пожалуйста, на [WAI-PAGEAUTH].


Полное описание форм шрифта italic

Показаны различные типы шрифтов и их italic-версии.

Изображено 8 строк текста: sans-serif, sans-serif-oblique, sans-serif-bold, sans-serif-bold-oblique, serif-bold, serif-bold-italic, serif, serif-italic.
Мы видим, что глифы italic не просто наклонены по сравнению с исходной версией roman, но отличаются также и начертанием.


Полное описание кернинга

Изображён пример кернинга.

Буквы "AVfj" выведены крупным шрифтом italic serif. Мы видим, что нижняя правая часть "A" пересекает вертикальную ось, отделяющую её от "V" справа. Таким же образом, "f" и "j" входят в пространство друг друга.


Полное описание примера расположения заголовка слева от таблицы

На диаграмме показаны соотношение между таблицей и заголовком и то, как они ведут себя в модели визуального форматирования.

Изображена таблица с 3 столбцами, одним заголовочным рядом и 6 рядами ячеек данных. Таблица центрирована внутри своего содержащего блока, чьи правый и левый края обозначены вертикальными линиями и помечены "current margins". Перед таблицей имеется параграф с текстом.

Слева от левого края содержащего блока находится параграф из 5 строк, выровненных вправо, выровненный по низу таблицы. Таким образом, этот левый заголовок находится в левом поле тела/body.


Полное описание примера маркёров inside относительно outside

Диаграмма иллюстрирует, что бокс маркёра списка не влияет на позицию главного бокса списка.

Изображено два списка, разделённых горизонтальной линией. Каждый список содержит элементы, по две строки в каждом.

У верхнего списка бокс маркёра списка (содержащий круглый маркёр) находится вне и слева от основного бокса каждого элемента.

У нижнего списка бокс маркёра списка (содержащий круглый маркёр) является первым инлайн-боксом внутри основного бокса каждого элемента списка.

Под вторым списком стрелка, показывающая вверх, обозначает левый край всех четырёх основных боксов элементов списка. На лэйбле написано: "The left sides of the list item boxes are not affected by marker placement."


Типы носителя

7 Типы носителя

Содержание

  • 7.1 Введение
  • 7.2 Спецификация таблиц стилей, зависимых от типа носителя
    • 7.2.1 Правило @media
  • 7.3 Распознаваемые типы носителя
    • 7.3.1 Группы носителей

7.1 Введение

Одним из важнейших свойств таблиц стилей является то, что они специфицируют представление документа на различных носителях информации: на экране, бумаге, в речевом синтезаторе, в брайль-устройстве и т.п.

Некоторые свойства CSS созданы для конкретных носителей (например, свойство 'cue-before' - для звуковых пользовательских агентов (ПА)). Иногда, однако, таблицы стилей для различных носителей могут использовать одно и то же свойство, но при этом требуют для него различных значений. Например, свойство 'font-size' используется и для экрана, и для носителя печати. Однако эти два носителя достаточно различны, чтобы требовать различных значений для общего свойства; документ обычно требует для экрана более крупный шрифт, чем для печати. Опыт показывает также, что шрифты sans-serif лучше читаются на экране, а шрифты с засечками (serif) лучше читаются на бумаге. Исходя из этих соображений, необходимо указывать, что таблица стилей - или раздел таблицы стилей - применяется к носителю определённого типа.

7.2 Спецификация таблиц стилей, зависимых от типа носителя

В настоящее время есть два способа специфицировать зависимость от типа носителя в таблицах стилей:

  • Специфицировать целевой носитель из таблицы стилей с помощью at-правил @media или @import.

    Пример(ы):

    @import url("loudvoice.css") aural;
@media print {
  /* здесь идёт таблица стилей для печати */
}
  • Специфицировать целевой носитель в языке документа. Например, в HTML 4.0 ([HTML40]) атрибут "media" элемента LINK специфицирует целевой носитель для внешней таблицы стилей:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
      <TITLE>Link to a target medium</TITLE>
      <LINK rel="stylesheet" type="text/css"
     media="print, handheld" href="foo.css">
   </HEAD>
   <BODY>
      <P>Тело документа...
   </BODY>
</HTML>

Правило @import определено в главе о каскадах.

7.2.1 Правило @media

Правило @media специфицирует целевые типы носителя (разделённые запятыми) в наборе правил (ограниченных фигурными скобками). Конструкция @media допускает присутствие правил таблиц стилей для различных носителей в одной таблице стилей:

  @media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }
  @media screen, print {
    BODY { line-height: 1.2 }
  }

7.3 Распознаваемые типы носителя

Тип носителя CSS именует набор свойств CSS. ПА, заявляющий о поддержке типа носителя по имени, обязан поддерживать все свойства, применимые к данному типу носителя.

Имена для типов носителя в CSS отражают целевое устройство, на которое соответствующие свойства оказывают действие. В следующем списке типов носителя CSS описания в скобках не являются нормативными. Они лишь дают представление о том, к каким устройствам относится данный тип носителя.

все
Для всех устройств.
звуковой
Предполагается для использования в речевых синтезаторах. См. детали в разделе звуковые таблицы стилей.
брайль-устройство
Для брайль-устройств.
брайль-принтер
Для страничных брайль-принтеров.
портативный
Для портативных устройств (обычно с маленьким экраном, монохромных, с ограниченной пропускной способностью).
печатный
Предполагается для страничных непрозрачных материалов и для документов, просматриваемых на экране в режиме предварительного просмотра для печати. Информацию о вопросах форматирования, специфичных для страничных носителей, см. в разделе Страничные носители.
проектор
Предполагается для проецируемых презентаций, например, проекторов или печати на прозрачные носители. Информацию о вопросах форматирования, специфичных для страничных носителей, см. в разделе Страничные носители.
экран
Прежде всего - для компьютерного цветного экрана.
tty
Для носителей, использующих решётку символов фиксированного размера, таких как телетайп, терминал или портативные устройства с ограниченными возможностями дисплея. Авторы не должны использовать пикселы с типом носителя "tty".
tv
Для устройств типа телевизора (низкое разрешение, цвет, ограниченная возможность прокрутки экрана, звуковые возможности).

Названия типов носителя нечувствительны к регистру.

Из-за быстрых изменений технологий, CSS2 не специфицирует определительный список типов носителя, которые могут быть значениями для @media.

Примечание. Будущие версии CSS могут расширить этот список. Авторы не должны ссылаться на названия типов носителя, ещё не определённых в спецификации CSS.

7.3.1 Группы носителей

Каждое определение свойства CSS специфицирует типы носителя, для которых свойство обязано выполняться на соответствующих ПА. Поскольку свойства обычно применяются для различных носителей, раздел "Применяется: " каждого определения свойства перечисляет группы носителей, а не отдельные типы носителей. Каждое свойство применяется ко всем типам носителя группы, указанной в определении свойства.

CSS2 определяет следующие группы носителей:

  • непрерывные или страничные. "Оба" означает, что свойство применяется к обеим группам носителей.
  • визуальные, звуковые или осязательные.
  • решётка (для устройств с решётками символов) или растровые. "Оба" означает, что свойство применяется к обеим группам носителей.
  • интерактивные (для устройств, взаимодействующих с пользователем или статичные (для не взаимодействующих). "Оба" означает, что свойство применяется к носителям обеих групп.
  • все (включает все типы носителей).

В следующей таблице показаны соотношения между группами носителей и типами носителя:

Соотношения между группами носителя и типами носителя
Типы носителя | Группы носителей
 | непрерывный/ страничный | визуальный/звуковой/ осязательный | решётка/ растровый | интерактивный/ статичный
звуковой | непрерывный | звуковой | N/A | оба
брайль-устройство | непрерывный | осязательный | решётка | оба
брайль-принтер | страничный | осязательный | решётка | оба
портативный | оба | визуальный | оба | оба
печатный | страничный | визуальный | растровый | статичный
проектор | страничный | визуальный | растровый | статичный
экран | непрерывный | визуальный | растровый | оба
tty | непрерывный | визуальный | решётка | оба
tv | оба | визуальный, звуковой | растровый | оба


Приложение С: Замечания по реализации и выполнению для шрифтов

Приложение С. Замечания по реализации и выполнению для шрифтов

Содержание

  • C.1 Справочник терминологии шрифтов
  • C.2 Выбор шрифта
  • C.3 Значения Чисел Panose
  • C.4 Вычисление Диапазонов Unicode для TrueType
  • C.5 Автоматическая генерация дескриптора

Это приложение является только информативным, но не нормативным.

C.1 Справочник терминологии шрифтов

DocLock™
Bitstream-технология DocLock™ гарантирует, что TrueDoc PFRs могут использоваться только на том сайте, где они опубликованы. TrueDoc PFR, перемещённый на другой сайт или имеющий на себя ссылку с другого сайта, работать не будет.
Digital Signature/Цифровая подпись
Часть технологии доверительного управления, используемая для предоставления подтверждения о ресурсе.
Font Caching/Кэширование шрифта
Кэширование шрифта позволяет временно копировать шрифты на клиентской системе. Шрифты часто хранятся на диске с другими кэшированными объектами, такими как графика, специфичными для пользовательского агента (ПА).
Font Face
"Разновидность", относится к определённой разновидности шрифта, за исключением его размера.
Font Matching/Совпадение шрифтов
Совпадение шрифтов - это процесс выбора похожего шрифта на базе одного или нескольких атрибутов основного шрифта. Обычные атрибуты: serif/с засечками, sans-serif/без засечек, вес, высота заглавных, x-высота, spacing/плотность, язык и posture/позиция. Совпадение шрифтов зависит от алгоритма и разнообразия шрифтов-кандидатов.
Glyph Representation Sub-setting/Подразделение Представления Глифов
Подразделение (поднабор) представления глифов это процесс, при котором ненужные глифы (вместе с их информацией об ориентации и кернинге) удаляются из основного шрифта, чтобы создать уменьшенный поднабор шрифта, покрывающий определённый документ или набор документов. Это обычный способ для документов, использующих идеографическое письмо, где дополнение глифами базового шрифта может быть очень обширным. Подразделение представления глифов для документов, использующих письмо с лигатурами, такое как арабское, представляет трудности при отсутствии сведений о правилах формирования лигатур на конечной системе вывода.
Intellifont
Intellifont-технология была разработана фирмой Agfa и является первичным форматом для Hewlett-Packard и других принтеров, использующих язык PCL5. Это также первичный формат шрифтов компьютеров Amiga.
Infinifont
Техника синтезирования шрифтов, которая, задавая число Panose-1 (и, по выбору, дополнительные данные описания шрифта), может генерировать красивый шрифт без экстраполирования из одного мастер-контура или интерполяции между двумя или более контурами (см. [INFINIFONT]).
Italic
Класс форм букв латиницы, которые более курсивны, чем буквы roman-форм, но менее курсивны, чем формы ручного письма. Часто пары шрифтов разрабатываются и используются совместно; один - roman с засечками, а другой - italic. Другие термины для описания этого класса форм букв: cursive и, для кириллицы, kursiv. Для разновидностей sans-serif дополнительная разновидность - это часто наклонный вариант, а не другой класс форм букв.

Italic forms [D]

Kerning/Кернинг
Изменение расстояния между выбранными представлениями глифов, которое может быть слишком большим или слишком маленьким, чтобы получить более ровный типографский цвет.

Illustration of kerning [D]

Multiple Master Font/Множественный мастер-ширфт
Множественный мастер-шрифт содержит два первичных шрифта, которые используются со специальными программами вывода для предоставления интерполированного результата. Adobe Systems предоставляет механизм, позволяющий использовать параметры для управления выводом или интерполированным вводом шрифта. Эти параметры обычно описывают характеристики оригинального шрифта, и множественный мастер-результат называется "синтезированный шрифт."
Open Type
Open Type это расширение шрифтового формата TrueType, которое содержит дополнительную информацию, расширяющую возможности шрифта в поддержке высококачественной международной печати. Open Type может ассоциировать один символ с несколькими глифами представления и комбинации символов - с одним глифом (словообразующая лигатура). Open Type содержит двухмерную информацию для поддержки свойств комплексного позиционирования и присоединения глифов. TrueType Open и OpenType содержат конкретную информацию о письме и языке, так что текстовые процессоры могут уточнять своё поведение соответственно (см. [OPENTYPE]).
Server Font/Серверный шрифт
Server Font это ресурс шрифта, размещённый на сервере и вызываемый определением WebFont. ПА может использовать этот ресурс для отображения страницы.
Speedo
Speedo -технология шрифтов была разработана Bitstream и является первичным форматом шрифта на компьютерах Atari ST и Falcon. Используется также в компьютерах с запущенной системой X window.
TrueDoc
TrueDoc -технология была разработана Bitstream для создания, переноса и прорисовки платформонезависимых масштабируемых объектов шрифта в web. Создание объектов шрифта выполняется в character shape recorder (CSR) TrueDoc, а вывод объектов шрифта - в character shape player (CSP) TrueDoc. Технология предназначена для просмотра и печати в web.
TrueDoc Portable Font Resource/Переносимые Ресурсы Шрифта
TrueDoc Portable font resource (или PFR) это платформонезависимый масштабируемый объект шрифта, вырабатываемый CSP. Ввод может быть TrueType или Type 1 любого ответвления Windows, Mac или Unix. TrueDoc Portable Font Resources предоставляют хорошие пропорции компрессии, платформонезависимы и, поскольку они не в первичном формате шрифта (TrueType или Type 1), не могут легко инсталироваться.
TrueType
TrueType это формат, разработанный Apple и лицензированный Microsoft. TrueType это первичный формат шрифта операционной системы для Windows и Macintosh. TrueType содержит иерархический набор таблиц и глифов-изображений. Символы могут выводиться на посимвольном базисе или на базе размера в пунктах, давая превосходное качество для данных разрешений экрана. Шрифты TrueType для Windows и Mac мало отличаются, хотя и могут быть достаточно различными для предотвращения межплатформенного использования.
TrueType Collection/Коллекция TrueType
TrueType Collection (или TTC) это расширение формата TrueType, включающее таблицы, позволяющие содержать много шрифтов TrueType в одном файле шрифта TrueType. Файлы TrueType collection встречаются теперь относительно редко.
TrueType GX Fonts/TrueType Шрифты GX
TrueType GX Fonts содержат расширения стандартного формата TrueType, допускающие изменяющиеся шрифты, подобные шрифтам Multiple Master. Может быть несколько мутаций параметров (осей), таких как вес, высота и наклон. Ось может определяться, что позволяет получить практически любой эффект. TrueType GX может поддерживать также альтернативные замещения представлений глифов для лигатур, контекстуальных форм, дробей и т.д. Для вычислений TrueType GX доступны только на Mac (см. [TRUETYPEGX]).
Type 1 font/Шрифты Type 1
Шрифты Type 1, разработанные Adobe Systems, были одним из первых доступных масштабируемых форматов. Шрифты Type 1 обычно содержат 228 символов с глифами-изображениями, описанных с использованием кривых третьей степени bezier. Mac, Windows и X имеют схожие, но отдельные форматы; Adobe предоставляет Adobe Type Manager для всех трёх платформ. Type1c это более ранняя форма с компрессией без потерь для глифов-изображений Type 1.
URI Binding/Связывание с URI
Процесс подключения определённого ресурса шрифта к данному Web-сайту путём внедрения кодированного URI или цифрового подтверждения использования в ресурс шрифта.

C.2 Выбор шрифта

Имеется множество различных форматов шрифта для использования на разных платформах. Чтобы выбрать предпочтительный формат шрифта, используется свободная дискуссия (см. [NEGOT]). Всегда можно определить, когда ссылка на шрифт отсутствует, поскольку URI находится внутри описания шрифта. Данная конкретная реализация будет знать, какие форматы загружаемых шрифтов она поддерживает и может, соответственно, использовать подсказки формата для исключения загрузки шрифтов неподдерживаемых форматов.

C.3 Значения Чисел Panose

Illustration of Panose-1 [D]

Числа Family, Serif Style и Proportion используются Windows95 для выбора и совпадений шрифтов.

Значения десяти чисел и допустимые значения (в скобках) даны ниже для самого общего случая, когда цифра "family" - 2, Text and Display. (Если первая цифра имеет другие значения, то остальные девять цифр имеют другой смысл (значение)). Детальную информацию о Panose-1 см. в [PANOSE].

Family
  • Any (0)
  • No Fit (1)
  • [PANOSE] Latin Text and Display (2)
  • [PANOSE] Latin Script (3)
  • [PANOSE] Latin Decorative (4)
  • [PANOSE] Latin Pictorial (5)
Serif Style
  • Any (0)
  • No Fit (1)
  • Cove (2)
  • Obtuse Cove (3)
  • Square Cove (4)
  • Obtuse Square Cove (5)
  • Square (6)
  • Thin (7)
  • Bone (8)
  • Exaggerated (9)
  • Triangle (10)
  • Normal Sans (11)
  • Obtuse Sans (12)
  • Perp Sans (13)
  • Flared (14)
  • Rounded (15)
Weight
  • Any (0)
  • No Fit (1)
  • Very Light (2)[100]
  • Light (3) [200]
  • Thin (4) [300]
  • Book (5) [400] то же, что CSS1 'normal'
  • Medium (6) [500]
  • Demi (7) [600]
  • Bold (8) [700] то же, что CSS1 'bold'
  • Heavy (9) [800]
  • Black (10) [900]
  • Extra Black / Nord (11) [900] форсирует отображение в масштаб 100-900 CSS1
Proportion
  • Any (0)
  • No Fit (1)
  • Old Style (2)
  • Modern (3)
  • Even Width (4)
  • Expanded (5)
  • Condensed (6)
  • Very Expanded (7)
  • Very Condensed (8)
  • Monospaced (9)
Contrast
  • Any (0)
  • No Fit (1)
  • None (2)
  • Very Low (3)
  • Low (4)
  • Medium Low (5)
  • Medium (6)
  • Medium High (7)
  • High (8)
  • Very High (9)
Stroke Variation
  • Any (0)
  • No Fit (1)
  • No Variation (2)
  • Gradual/Diagonal (3)
  • Gradual/Transitional (4)
  • Gradual/Vertical (5)
  • Gradual/Horizontal (6)
  • Rapid/Vertical (7)
  • Rapid/Horizontal (8)
  • Instant/Horizontal (9)
  • Instant/Vertical (10)
Arm Style
  • Any (0)
  • No Fit (1)
  • Straight Arms/Horizontal (2)
  • Straight Arms/Wedge (3)
  • Straight Arms/Vertical (4)
  • Straight Arms/Single Serif (5)
  • Straight Arms/Double Serif (6)
  • Non-Straight Arms/Horizontal (7)
  • Non-Straight Arms/Wedge (8)
  • Non-Straight Arms/Vertical 90)
  • Non-Straight Arms/Single Serif (10)
  • Non-Straight Arms/Double Serif (11)
Letterform
  • Any (0)
  • No Fit (1)
  • Normal/Contact (2)
  • Normal/Weighted (3)
  • Normal/Boxed (4)
  • Normal/Flattened (5)
  • Normal/Rounded (6)
  • Normal/Off Center (7)
  • Normal/Square (8)
  • Oblique/Contact (9)
  • Oblique/Weighted (10)
  • Oblique/Boxed (11)
  • Oblique/Flattened (12)
  • Oblique/Rounded (13)
  • Oblique/Off Center (14)
  • Oblique/Square (15)
Midline
  • Any (0)
  • No Fit (1)
  • Standard/Trimmed (2)
  • Standard/Pointed (3)
  • Standard/Serifed (4)
  • High/Trimmed (5)
  • High/Pointed (6)
  • High/Serifed (7)
  • Constant/Trimmed (8)
  • Constant/Pointed (9)
  • Constant/Serifed (10)
  • Low/Trimmed (11)
  • Low/Pointed (12)
  • Low/Serifed (13)
XHeight
  • Any (0)
  • No Fit (1)
  • Constant/Small (2)
  • Constant/Standard (3)
  • Constant/Large (4)
  • Ducking/Small (5)
  • Ducking/Standard (6)
  • Ducking/Large (7)

Panose-2 (см. [PANOSE2]) это спецификация более исчерпывающей классификации шрифтов и технология совпадений, не ограниченные латиницей. Например, характеристики засечек латиницы могут сравниваться с окончаниями линий разновидности Kanji.

Illustration of Panose-2

Значение Panose-2 не хранится в каком-либо известном формате шрифта, но может быть измерено.

C.4 Вычисление Диапазонов Unicode для TrueType

Эта информация доступна в шрифте при просмотре битов 'ulUnicodeRange' в таблице 'OS/2' (если она ('OS/2') её имеет), которая (таблица) содержит битовые поля представления набора. Эта таблица определена в ревизии 1.66 спецификации TrueType от Microsoft. Можно рассматривать эту информацию как набор, где каждый элемент соответствует блоку символов Unicode 1.1, и присутствие этого элемента в наборе означает, что шрифт имеет один или более глифов-изображений для представления по меньшей мере одного символа этого блока. Набор содержит 128 элементов, как описано ниже. Порядок обычно следует порядку стандарта Unicode 1.1. Эта таблица может использоваться для конвертации информации в шрифте TrueType в дескриптор 'unicode-range' CSS.
Блок | Add/Прибавить | Имя блока | Диапазон Unicode
0 | 1 | Basic Latin | U+0-7F
1 | 2 | Latin-1 Supplement | U+80-FF
2 | 4 | Latin-1 Extended-A | U+100-17F
3 | 8 | Latin Extended-B | U+180-24F
4 | 1 | IPA Extensions | U+250-2AF
5 | 2 | Spacing Modifier Letters | U+2B0-2FF
6 | 4 | Combining Diacritical Marks | U+300-36F
7 | 8 | Greek | U+370-3CF
8 | 1 | Greek Symbols and Coptic | U+3D0-3EF
9 | 2 | Cyrillic | U+400-4FF
10 | 4 | Armenian | U+530-58F
11 | 8 | Hebrew | U+590-5FF
12 | 1 | Hebrew Extended-A Hebrew Extended-B | ?? какие диапазоны ??
13 | 2 | Arabic | U+600-69F
14 | 4 | Arabic Extended | U+670-6FF
15 | 8 | Devanagari | U+900-97F
16 | 1 | Bengali | U+980-9FF
17 | 2 | Gurmukhi | U+A00-A7F
18 | 4 | Gujarati | U+A80-AFF
19 | 8 | Oriya | U+B00-B7F
20 | 1 | Tamil | U+B80-BFF
21 | 2 | Telugu | U+C00-C7F
22 | 4 | Kannada | U+C80-CFF
23 | 8 | Malayalam | U+D00-D7F
24 | 1 | Thai | U+E00-E7F
25 | 2 | Lao | U+E80-EFF
26 | 4 | Georgian | U+10A0-10EF
27 | 8 | Georgian Extended | U+10F0-10FF ??
28 | 1 | Hangul Jamo | U+1100-11FF
29 | 2 | Latin Extended Additional | -
30 | 4 | Greek Extended | U+1F00-1FFF
31 | 8 | General Punctuation | U+2000-206F
32 | 1 | Superscripts and Subscripts | -
33 | 2 | Currency Symbols | U+20A0-20CF
34 | 4 | Combining Marks for Symbols | U+20D0-20FF
35 | 8 | Letterlike Symbols | U+2100-214F
36 | 1 | Number Forms | U+2150-218F
37 | 2 | Arrows | U+2190-21FF
38 | 4 | Mathematical Operators | U+2200-22FF
39 | 8 | Miscellaneous Technical | U+2300-23FF
40 | 1 | Control Pictures | U+2400-243F
41 | 2 | Optical Character Recognition | U+2440-245F
42 | 4 | Enclosed Alphanumerics | U+2460-24FF
43 | 8 | Box Drawing | U+2500-257F
44 | 1 | Block Elements | U+2580-259F
45 | 2 | Geometric Shapes | U+25A0-25FF
46 | 4 | Miscellaneous Symbols | U+2600-26FF
47 | 8 | Dingbats | U+2700-27BF
48 | 1 | CJK Symbols and Punctuation | U+3000-303F
49 | 2 | Hiragana | U+3040-309F
50 | 4 | Katakana | U+30A0-30FF
51 | 8 | Bopomofo | U+3100-312F
52 | 1 | Hangul Compatibility Jamo | U+3130-318F
53 | 2 | CJK Miscellaneous | ??
54 | 4 | Enclosed CJK Letters and Months | U+3200-32FF
55 | 8 | CJK compatibility | U+3300-33FF
56 | 1 | Hangul | U+AC00-D7FF
59 | 8 | CJK Unified Ideographs | U+4E00-9FFF
60 | 1 | Private Use Area | U+E000-F8FF
61 | 2 | CJK Compatibility Ideographs | U+F900-FAFF
62 | 4 | Alphabetic Presentation Forms | U+FB00-FB4F
63 | 8 | Arabic Presentation Forms-A | U+FB50-FDFF
64 | 1 | Combining Half Marks | U+FE20-FE2F
65 | 2 | CJK compatibility Forms | U+FE30-FE4F
66 | 4 | Small Form Variants | U+FE50-FE6F
67 | 8 | Arabic Presentation Forms-B | U+FE70-FEFF
68 | 1 | Halfwidth and Fullwidth Forms | U+FF00-FFEF
69 | 2 | Specials | U+FFF0-FFFD

В системе битовых полей TrueType есть проблема, заключающаяся в том, что эта система присоединена к Unicode 1.1 и не справляется с расширением Unicode - например, невозможно представить Tibetan или другие виды письма, введённые в Unicode 2.0 или более поздних ревизиях.

C.5 Автоматическая генерация дескриптора

Авторские утилиты должны позволять авторам таблиц стилей добавлять и редактировать дескрипторы шрифтов. В некоторых случаях авторские утилиты могут оказать помощь путём локальной проверки установленных шрифтов и автоматической генерации дескрипторов для шрифтов, на которые имеются ссылки в таблице стилей. Эта функция может выполняться также утилитами, подразделяющими или конвертирующими шрифты для готовности к динамической загрузке.

Данная таблица указывает, где может быть найдена такая информация для шрифтов обычных форматов.

Дескриптор | Type 1 | TrueType и OpenType | TrueType GX [TRUETYPEGX]
'ascent' | 'Ascender' в файле AFM/PFM | 'Ascender' в таблице 'hhea' или (предпочтительнее) 'sTypoAscender' в таблице 'OS/2' | 'horizontalBefore' в таблице 'fmtx
'baseline' |  |  | таблица bsln, см. примечание ниже
'bbox' | FontBBox, словарь шрифтов | вхождения таблицы 'head' - 'xMin', 'xMax', 'yMin' и 'yMax' |
'cap-height' | CapHeight в файле AFM/PFM |  |
'descent' | 'Descender' в файле AFM/PFM |  |
'mathline' |  |  | таблица bsln
'font-family' | FamilyName, fontinfo-словарь | таблица name |
'stemh' | StdHW, приватный словарь файла AFM/PFM |  |
'stemv' | /StdVW, приватный словарь | таблица cvt |
'topline' |  |  | таблица bsln
'unicode-range' | cmap file | таблица OS/2, см. Приложение С |
'units-per-em' | FontMatrix, словарь шрифтов | unitsPerEm, таблица head |
'widths' |  | таблица hmtx |
  • Внутри таблицы bsln, ideographic centered baseline может использоваться для растяжений преобладающих идеографических символов, а ideographic low baseline больше подходит для идеографических символов при прогоне преобладающих символов Latin, Greek или Cyrillic.


Полное описание примера несжимаемого 'overflow'

Диаграмма показывает, как содержимое может переполнять бокс.

Изображено два бокса. Первый имеет красную рамку и помечен DIV. Верхний левый угол второго бокса, помеченного BLOCKQUOTE, расположен в середине бокса DIV. Бокс BLOCKQUOTE имеет чёрную пунктирную рамку и следующий текст: "I didn't like the play, but then again I saw it under adverse conditions - the curtain was up." Бокс BLOCKQUOTE переполняет бокс DIV в его правой нижней части. Поскольку свойство 'overflow' в BLOCKQUOTE установлено в 'visible', переполняющий текст остаётся видимым.


Полное описание примера сжимаемого 'overflow'

Диаграмма показывает, как содержимое может быть сжато.

Один из боксов - с красной рамкой. В правой нижней четверти этого (DIV) бокса - часть содержимого элемента BLOCKQUOTE с пунктирными верхним и левым краями. Остальная часть невидима, поскольку сжата боксом DIV, чьё свойство 'overflow' имеет значение 'hidden'.


Страничные носители

13 Страничные носители

Содержание

  • 13.1 Введение
  • 13.2 Страничные боксы: правило @page
    • 13.2.1 Поля страниц
    • 13.2.2 Размер страницы: свойство 'size'
      • Размещение страничных боксов, не помещающихся на листе
      • Позиционирование страничного бокса на листе
    • 13.2.3 Знаки обрезки: свойство 'marks'
    • 13.2.4 Левая, правая и первая страницы
    • 13.2.5 Содержимое вне страничного бокса
  • 13.3 Разрывы страниц
    • 13.3.1 Разрывы перед/после элементов: 'page-break-before', 'page-break-after', 'page-break-inside'
    • 13.3.2 Использование именованных страниц: 'page'
    • 13.3.3 Разрывы внутри элементов: 'orphans', 'widows'
    • 13.3.4 Допустимые разрывы страниц
    • 13.3.5 Форсированные разрывы страниц
    • 13.3.6 "Наилучшие" разрывы страниц
  • 13.4 Каскадирование в контексте страницы

13.1 Введение

Страничный носитель (например, бумага, плёнка, страницы , выводимые на экране компьютера и т.п.) отличается от непрерывного носителя тем, что содержимое документа разделяется на одну или более абстрактных страниц. Чтобы обрабатывать разрывы страниц, CSS2 расширяет модель визуального форматирования следующим образом:

  1. Страничный бокс расширяет модель бокса, что позволяет авторам специфицировать размеры страницы, её полей и т.д.
  2. Страничная модель расширяет модель визуального форматирования, чтобы рассчитывать разрывы страниц.

Страничная модель CSS 2 специфицирует, как форматируется документ в пределах прямоугольной области - страничного бокса - который имеет конечные ширину и высоту. Страничный бокс не обязательно соответствует реальному листу\странице, на котором документ в конце концов будет выведен (бумага, плёнка, экран и т.п.). Страничная модель CSS специфицирует форматирование в страничном боксе, но за перенос страничного бокса на лист отвечает пользовательский агент (ПА).
Некоторые возможности переноса:

  • Перенос одного страничного бокса на один лист (например, односторонняя печать).
  • Перенос двух страничных боксов на две стороны одного листа (например, двухсторонняя печать).
  • Перенос N (маленького) страничного бокса на один лист (называется "n-up").
  • Перенос одного (большого) страничного бокса на N x M листов (называется "tiling").
  • Создание подписей. Подпись, это группа страниц, напечатанных на листе, которые после брошюрования и обрезки выглядят, как книга, и расположены в соответствующем порядке.
  • Печать одного документа в несколько потоков печати.
  • Вывод в файл.

Хотя CSS2 не специфицирует то, как ПА переносят страничные боксы на листы, не даётся также и определённого механизма для того, чтобы сообщить ПА о размерах и ориентации целевого листа.

13.2 Страничные боксы: правило @page

Страничный бокс это прямоугольный регион, содержащий две области:

  • Область страницы. Включает боксы, расположенные на этой странице. Края области страницы работают как начальный содержащий блок планировки и расположены между разрывами страниц.
  • Область полей, окружающих область страницы.

Примечание. В CSS2 свойства рамки и заполнения не применяются к страницам; это возможно в будущем.

Авторы специфицируют размеры, ориентацию, поля и т.п. страничного бокса в правиле @page. Правило @page состоит из ключевого слова "@page", селектора станицы (и, без пробелов, возможного псевдокласса страницы) и блока объявлений (находящихся в т.н. контексте страницы).

Селектор страницы специфицирует, для каких страниц объявления применяются. В CSS2 селекторы страницы могут означать первую страницу, все левые страницы, все правые страницы или страницу с определённым именем.

Размеры страничного бокса устанавливаются свойством 'size'.
Размеры области страницы - это размеры страничного бокса минус область полей.

Пример(ы):

Следующее правило @page устанавливает размер страничного бокса в 8.5 x 11 дюймов и создаёт поле '2см' со всех сторон между краем страничного бокса и областью листа:

@page { size 8.5in 11in; margin: 2cm }
Свойство 'marks' в правиле @page специфицирует знаки обрезки и крестика для страничного бокса.

13.2.1 Поля страницы

Свойства полей ('margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin') применяются внутри контекста страницы. На следующей диаграмме показаны соотношения между листом, страничным боксом и полями страницы:

Illustration of sheet, page box, margin, and page area. [D]

Вычисленное значение полей бокса вверху или внизу области страницы - '0'.

Контекст страницы не имеет никаких указаний о шрифте, так что единицы измерения 'em' и 'ex' не допускаются. Процентные значения свойств полей относительны к размерам страничного бокса; для левого и правого полей - они соотносятся с шириной страничного бокса, а для верхнего и нижнего полей - к высоте страничного бокса. Все другие единицы измерения, ассоциированные с соответствующими свойствами CSS2, являются допустимыми.

Из-за негативных значений полей (у страничного бокса или у элементов) или абсолютного позиционирования содержимое может оканчиваться вне страничного бокса, но это содержимое может быть "вырезано" - ПАгентом, принтером или, наконец, бумажным ножом.

13.2.2 Размер страницы: свойство 'size'

'size'
Значение:<length>{1,2} | auto | portrait | landscape | inherit
Начальное:auto
Применяется: к контексту страницы
Наследуется:N/A
Процентное:N/A
Носитель:визуальный, страничный

Это свойство специфицирует размер и ориентацию страничного бокса.

Размер страничного бокса может быть или "absolute/абсолютным" (фиксированный размер), или "relative/относительным" (масштабируемым, т.е. соответствующим имеющимся размерам листа). Относительные страничные боксы позволяют ПА масштабировать документ и оптимально использовать целевые размеры.

Три значения свойства 'size' создают относительный страничный бокс:

auto
Страничный бокс будет установлен в соответствии с размерами и ориентацией целевого листа.
landscape
Переопределяет целевую ориентацию. Страничный бокс будет тех же размеров, что и целевой, и по горизонтали будут расположены длинные стороны.
portrait
Переопределяет целевую ориентацию. Страничный бокс будет тех же размеров, что и целевой, и по горизонтали будут расположены короткие стороны.

Пример(ы):

Здесь внешний край страничного бокса будет выровнен с целевым. Процентные значения свойства 'margin' - относительны к целевым размерам, поэтому, если целевые размеры - 21.0см x 29.7см (т.е. A4), поля будут 2.10см и 2.97см.

@page {
  size: auto;   /* auto это начальное значение */
  margin: 10%;
}

Измеряемые значения свойства 'size' создают абсолютный страничный бокс. Если специфицировано только одно значение, оно устанавливает и ширину, и высоту страничного бокса (т.е. квадратный бокс). Поскольку страничный бокс является начальным содержащим блоком, процентные значения для свойства 'size' не допускаются.

Пример(ы):

@page {
  size: 8.5in 11in;  /* ширина - высота */
}

В этом примере устанавливаются: ширина страничного бокса - 8.5 дюймов и высота - 11 дюймов. Такой страничный бокс требует размеров целевого листа 8.5"x11" или больше.

ПА могут позволять пользователям контролировать перенос страничного бокса на лист (например, поворачивать абсолютный страничный бокс при печати).

Размещение страничных боксов, не помещающихся на листе

Если страничный бокс не вмещается в размеры целевого листа, ПА может:

  • Повернуть страничный бокс на 90°, если это поможет разместить его.
  • Масштабировать бокс, чтобы вместить в целевые размеры.

ПА должен запрашивать у пользователя подтверждение на эти операции.

Позиционирование страничного бокса на листе

Если страничный бокс имеет размеры меньше целевых, то ПА может размещать страничный бокс в любом месте листа. Однако рекомендуется, чтобы страничный бокс центрировался на листе, поскольку это выровняет сдвоенные страницы и исключит случайную потерю информации, расположенной близко к краю листа.

13.2.3 Знаки обрезки: свойство 'marks'

'marks'
Значение:[ crop || cross ] | none | inherit
Начальное:none
Применяется: к контексту страницы
Наследуется:N/A
Процентное:N/A
Носитель:визуальный, страничный

При высококачественной печати маркировка часто помещается вне страничного бокса. Данное свойство специфицирует, должны ли знаки крестика или обрезки, или оба, отображаться сразу за краем страничного бокса.

Знаки обрезки обозначают место, где страница должна быть обрезана.
Знак "крестик" (известный также как знак регистрации) используется для выравнивания листов.

Маркировка видна только на абсолютных страничных боксах (см. свойство 'size'). При относительных страничных боксах, страничный бокс будет выровнен с целевым, а маркировка будет находиться за пределами области печати.

Размеры, стиль и расположение крестиков зависят от ПА.

13.2.4 Левая, правая и первая страницы

При печати двухсторонних документов страничные боксы левой и правой страниц должны различаться. Это можно обозначить с помощью двух псевдоклассов CSS, которые могут быть определены в контексте страницы.

Все страницы автоматически классифицируются ПАгентами на псевдоклассы :left или :right.

Пример(ы):

@page :left {
  margin-left: 4cm;
  margin-right: 3cm;
}

@page :right {
  margin-left: 3cm;
  margin-right: 4cm;
}

Если даны разные объявления для левых и правых страниц, ПА обязан использовать эти объявления, даже если ПА не переносит страничные боксы на левый и правый листы (например, для принтера, имеющего только одностороннюю печать).

Авторы могут специфицировать также стиль для первой страницы документа псевдоклассом :first:

Пример(ы):

@page { margin: 2cm } /* Все поля установлены в 2см */

@page :first {
  margin-top: 10cm    /* Верхнее поле на первой странице - 10см */
}

Является ли первая страница документа :left или :right, зависит от направления письма в документе и находится вне пределов рассмотрения данного документа. Однако, чтобы форсировать первую страницу в :left или :right, авторы могут вставить разрыв страницы перед первым генерируемым боксом (например, в HTML, специфицировать это для элемента BODY).

Свойства, специфицированные в :left (или :right) в правилах @page, переопределяют те же свойства, специфицированные в правиле @page и не имеющие специфицированного псевдокласса. Свойства, специфицированные в :first в правиле @page, переопределяют те же свойства, специфицированные в :left (или :right) в правилах @page.

Примечание. Добавление объявлений в псевдоклассы :left или :right не указывает, выходит ли документ на принтер одно- или двухсторонним (это находится вне рамок данной спецификации).

Примечание. В будущих версиях CSS возможно появление других псевдоклассов страницы.

13.2.5 Содержимое вне страничного бокса

При форматировании содержимого модели страницы, часть содержимого может выйти за границы страничного бокса. Например, элемент, чьё свойство 'white-space' имеет значение 'pre', может генерировать бокс, который окажется шире страничного бокса. Также, если боксы позиционированы абсолютно, они могут оканчиваться в "несогласованном" месте. Например, изображения могут быть размещены у края страничного бокса или на 100,000 дюймов ниже страничного бокса.

Спецификация точного форматирования таких элементов находится вне пределов рассмотрения данного документа. Однако мы рекомендуем, чтобы авторы и ПА учитывали следующие общие принципы, касающиеся содержимого вне страничного бокса:

  • Содержимое должно допускаться немного позади страничного бокса, чтобы страницы слегка "сочились".
  • ПА должны исключить генерирование большого количества пустых страничных боксов для позиционирования элементов (например, Вы не захотите печатать 100 пустых страниц). Заметьте, однако, что генерирование небольшого количества пустых страничных боксов может понадобиться для значений 'left' и 'right' в 'page-break-before' и 'page-break-after'.
  • Авторы не должны позиционировать элементы в несогласованных местах в целях исключения их вывода. Вместо этого нужно:
    • Чтобы в целом уменьшить генерацию боксов, установить свойство 'display' в 'none'.
    • Чтобы сделать бокс невидимым, использовать свойство 'visibility'.
  • ПА могут обрабатывать боксы, расположенные вне страничного бокса, разными способами, в том числе - отбрасывая их или создавая для них страничные боксы в конце документа.

13.3 Разрывы страниц

В данном разделе разъясняется форматирование страниц в CSS2. Пять свойств указывают, где ПА может или должен разрывать страницы и на какой странице (левой или правой) должно выводиться последующее содержимое. Каждый разрыв страницы заканчивает вывод в текущем страничном боксе и вызывает размещение оставшихся частей дерева документа в новом страничном боксе.

13.3.1 Разрывы перед/после элементов: 'page-break-before', 'page-break-after', 'page-break-inside'

'page-break-before'
Значение:auto | always | avoid | left | right | inherit
Начальное:auto
Применяется: к элементам уровня блока
Наследуется:нет
Процентное:N/A
Носитель:визуальный, страничный
'page-break-after'
Значение:auto | always | avoid | left | right | inherit
Начальное:auto
Применяется: к элементам уровня блока
Наследуется:нет
Процентное:N/A
Media: визуальный, страничный
'page-break-inside'
Значение:avoid | auto | inherit
Начальное:auto
Применяется: к элементам уровня блока
Наследуется:да
Процентное:N/A
Media: визуальный, страничный

Значения этих свойств имеют следующий смысл:

auto
Ни форсирует, ни запрещает разрыв страницы перед (после, внутри) генерируемого бокса.
always
Всегда форсирует разрыв страницы перед (после, внутри) генерируемого бокса.
avoid
Исключает разрыв страницы перед (после, внутри) генерируемого бокса.
left
Форсирует один или два разрыва страницы перед (после, внутри) генерируемого бокса, так что следующая страница форматируется как левая страница.
right
Форсирует один или два разрыва страницы перед (после, внутри) генерируемого бокса, так что следующая страница форматируется как правая страница.

Потенциально размещение разрыва страницы находится под влиянием свойства 'page-break-inside' родительского элемента, свойства 'page-break-after' предыдущего элемента и свойства 'page-break-before' последующего элемента. Если эти свойства имеют значения, отличные от 'auto', то значения 'always', 'left' и 'right' получают преимущество перед 'avoid'.
См. в разделе о допустимых разрывах страниц точные правила того, как эти свойства могут форсировать или подавлять разрыв страницы.

13.3.2 Использование именованных страниц: 'page'

'page'
Значение:<identifier> | auto
Начальное:auto
Применяется: к элементам уровня блока
Наследуется:да
Процентное:N/A
Носитель:визуальный, страничный

Свойство 'page' можно использовать для спецификации определённого типа страницы, на которой элемент должен быть выведен.

Пример(ы):

Все таблицы будут размещены на правой стороне страницы с ориентацией landscape:

@page rotated {size: landscape}
TABLE {page: rotated; page-break-before: right}

Свойство 'page' работает так: если бокс блока с инлайн-содержимым имеет свойство 'page', отличное от аналогичного свойства предшествующего бокса блока с инлайн-содержимым, тогда один или два разрыва страницы вставляются между ними, и боксы после разрыва отображаются в страничном боксе именованного типа. См. ниже "Форсированные разрывы страниц".

Пример(ы):

В этом примере две таблицы отображаются на landscape-страницах (или на одной странице, если входят), и тип страницы "narrow" вообще не используется, вопреки установкам в DIV:

@page narrow {size: 9cm 18cm}
@page rotated {size: landscape}
DIV {page: narrow}
TABLE {page: rotated}
с этим документом:
<DIV>
<TABLE>...</TABLE>
<TABLE>...</TABLE>
</DIV>

13.3.3 Разрывы внутри элементов: 'orphans', 'widows'

'orphans'
Значение:<integer> | inherit
Начальное:2
Применяется: к элементам уровня блока
Наследуется:да
Процентное:N/A
Носитель:визуальный, страничный
'widows'
Значение:<integer> | inherit
Начальное:2
Применяется: к элементам уровня блока
Наследуется:да
Процентное:N/A
Носитель:визуальный, страничный

Свойство 'orphans' специфицирует минимальное количество строк параграфа, которые должны оставаться внизу страницы. Свойство 'widows' специфицирует минимальное количество строк параграфа, которые должны оставаться вверху страницы. Примеры того, как они используются для управления разрывами страниц, даны ниже.

Информацию о форматировании параграфов см. в разделе Строчные боксы.

13.3.4 Допустимые разрывы страниц

При нормальном обтекании разрывы страниц могут появляться в следующих местах:

  1. На вертикальном поле между боксами блока. Если разрыв страницы появляется здесь, вычисленные значения соответствующих свойств 'margin-top' и 'margin-bottom' установлены в '0'.
  2. Между строчными боксами внутри бокса блока.

Эти разрывы являются субъектами для следующих правил:

  • Правило A: Разрывы из пункта (1) допускаются, только если свойства 'page-break-after' и 'page-break-before' всех элементов, генерирующих боксы у данного поля, разрешают это, что имеет место, когда по меньшей мере одно из них (свойств) имеет значение 'always', 'left' или 'right', или когда все они - 'auto'.
  • Правило B: В то же время, если все они - 'auto' и ближайший общий предок всех элементов имеет значение свойства 'page-break-inside' - 'avoid', тогда разрыв здесь не разрешается.
  • Правило C: Разрывы из пункта (2) допускаются, только если количество строчных боксов между разрывом и началом закрывающего бокса блока имеет значение 'orphans' или более, а количество строчных боксов между разрывом и концом бокса имеет значение 'widows' или более.
  • Правило D: В дополнение, разрывы (2) допускаются, только если свойство 'page-break-inside' - 'auto'.

Если вышесказанное не обеспечивает достаточное количество точек разрывов для предотвращения выхода содержимого за пределы страничного бокса, тогда правила B и D исключаются для того, чтобы найти дополнительные точки разрывов.

Если это всё ещё не даёт достаточного количества точек разрывов, то правила A и C также исключаются, чтобы найти дополнительные точки разрывов.

Разрывы страниц не могут появляться внутри боксов, позиционированных абсолютно.

13.3.5 Форсированные разрывы страниц

Разрыв страницы обязан возникнуть в (1), если среди свойств 'page-break-after' и 'page-break-before' всех элементов, генерирующих боксы у данного поля, имеется по меньшей мере одно со значением 'always', 'left' или 'right'.

Разрыв страницы обязан появиться в (1), если последний строчный бокс выше этого поля и первый бокс - ниже него не имеют одинакового значения для 'page'.

13.3.6 "Наилучшие" разрывы страниц

CSS2 не определяет, какой из наборов допустимых разрывов страниц обязан использоваться; CSS2 не запрещает ПАгенту делать разрыв в любой возможной точке разрыва или не делать разрывов вообще. Но CSS2 рекомендует, чтобы ПА следовали следующей эвристике (признавая наличие некоторых противоречий):

  • Делать разрывы как можно реже.
  • Делать все страницы, не оканчивающиеся форсированным разрывом, одинаковой высоты.
  • Исключить разрывы внутри блока, имеющего рамку.
  • Исключить разрывы внутри таблицы.
  • Исключить разрывы внутри всплывающего элемента.

Пример(ы):

Предположим, например, что таблица стилей содержит 'orphans : 4', 'widows : 2', и имеется 20 свободных строк (строчных боксов) внизу текущей страницы:

  • Если параграф в конце текущей страницы содержит 20 строк или менее, он должен быть размещён на текущей странице.
  • Если параграф содержит 21 или 22 строк, вторая часть параграфа обязана не нарушать работы 'widows', и, следовательно, вторая часть обязана содержать точно две строки.
  • Если параграф содержит 23 строки или более, первая часть должна содержать 20 строк, а вторая часть - остальные строки.

Теперь предположим, что 'orphans' - '10', 'widows' - '20', и имеется 8 свободных строк внизу текущей страницы:

  • Ели параграф в конце текущей страницы содержит 8 строк или менее, он должен быть размещён на текущей странице.
  • Если параграф содержит 9 строки или более, он не может быть разделён (что могло бы нарушить работу orphans), следовательно, он должен быть перемещён как блок на следующую страницу.

13.4 Каскадирование в контексте страницы

Объявления в контексте страницы подчиняются каскаду так же, как и нормальные объявления CSS2.

Пример(ы):

@page {
  margin-left: 3cm;
}

@page :left {
  margin-left: 4cm;
}

Из-за более высокой специфики селектора псевдокласса, левое поле левых страниц будет '4см', а все остальные страницы (т.е. правые) - левое поле '3см'.


Полное описание примера соотношений между страничным боксом и листом (бумаги)

На диаграмме показано соотношение между абстрактным страничным боксом и целевым листом, на котором он будет отображён.

Страничный бокс расположен в левой части диаграммы, имеет тонкую чёрную рамку и обозначен сверху "Page box". Другой бокс внутри страничного обозначен "Page area" и также имеет тонкую чёрную рамку. Область между краем страничного бокса и и краем "Page area" обозначена "Margin area".

Три стрелки справа от этого бокса (каждая обозначена "transfer") указывают на три листа разных размеров. Таким образом, абстрактный страничный бокс может быть выведен на различные целевые листы.


Полное описание изображения GUI Windows 95 с описанием шрифтов

Изображён GUI Windows 95, описывающий характеристики шрифта. В данном случае он показывает классификацию PANOSE разновидности шрифта Georgia Italic.


Полное описание иллюстрации к определению пиксела

Диаграмма иллюстрирует, как определение пиксела зависит от расстояния между пользователем и поверхностью просмотра (бумагой или экраном).

На рисунке показан взгляд пользователя на две панели, 28 дюймов (71 см) от пользователя и 140 дюймов (3.5 м) от пользователя. Расширяющийся конус проецируется от глаз пользователя на каждую панель. Там, где конус соединяется с первой панелью, проецируемый пиксел - .28 мм высотой. Там, где конус соединяется со второй панелью, проецируемый пиксел - 1.4 мм высотой.


Полное описание соотношений с пикселом выводного устройства

Диаграмма иллюстрирует соотношения между исходным пикселом-ссылкой и пикселом выводного устройства (называемым далее "dot/точка").

Рисунок показывает слева вывод лазерного принтера с высоким разрешением (высокой плотностью точек) и вывод экрана монитора с низким разрешением - справа. Для лазерного принтера один квадратный исходный пиксел покрывается 16-ю точками. Для экрана монитора один квадратный исходный пиксел покрывается одной точкой.


Индекс свойств

На экранах NetCaptor и MS IE5.5 эту страницу лучше смотреть с размером шрифта smallest.

Приложение F. Индекс свойств

Название | Значения | Начальное значение | Применяется: (По умолчанию: ко всем) | Наследуется | Процентное (По умолчанию: N/A) | Группа носителей
'azimuth' | <angle> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit | center |  | да |  | звуковой
'background' | [ 'background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'] | inherit | XX | визуальный | нет | допускается в 'background-position' | визуальный
'background-attachment' | scroll | fixed | inherit | scroll |  | нет |  | визуальный
'background-color' | <color> | transparent | inherit | transparent |  | нет |  | визуальный
'background-image' | <uri> | none | inherit | none |  | нет |  | визуальный
'background-position' | [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit | 0% 0% | к элементам уровня блока и к замещаемым элементам | нет | относительно размеров самого бокса | визуальный
'background-repeat' | repeat | repeat-x | repeat-y | no-repeat | inherit | repeat |  | нет |  | визуальный
'border' | [ 'border-width' || 'border-style' || <color> ] | inherit | см. индивидуальные свойства |  | нет |  | визуальный
'border-collapse' | collapse | separate | inherit | collapse | к элементам 'table' и 'inline-table' | да |  | визуальный
'border-color' | <color>{1,4} | transparent | inherit | см. индивидуальные свойства |  | нет |  | визуальный
'border-spacing' | <length> <length>? | inherit | 0 | к элементам 'table' и 'inline-table' | да |  | визуальный
'border-style' | <border-style>{1,4} | inherit | см. индивидуальные свойства |  | нет |  | визуальный
'border-top' 'border-right' 'border-bottom' 'border-left' | [ 'border-top-width' || 'border-style' || <color> ] | inherit | см. индивидуальные свойства |  | нет |  | визуальный
'border-top-color' 'border-right-color' 'border-bottom-color' 'border-left-color' | <color> | inherit | значение свойства 'color' |  | нет |  | визуальный
'border-top-style' 'border-right-style' 'border-bottom-style' 'border-left-style' | <border-style> | inherit | none |  | нет |  | визуальный
'border-top-width' 'border-right-width' 'border-bottom-width' 'border-left-width' | <border-width> | inherit | medium |  | нет |  | визуальный
'border-width' | <border-width>{1,4} | inherit | см. индивидуальные свойства |  | нет |  | визуальный
'bottom' | <length> | <percentage> | auto | inherit | auto | к позиционированным элементам | нет | относительно высоты содержащего блока | визуальный
'caption-side' | top | bottom | left | right | inherit | top | к элементам 'table-caption' | да |  | визуальный
'clear' | none | left | right | both | inherit | none | к элементам уровня блока | нет |  | визуальный
'clip' | <shape> | auto | inherit | auto | к элементам уровня блока и к замещаемым элементам | нет |  | визуальный
'color' | <color> | inherit | зависит от ПА |  | да |  | визуальный
'content' | [ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit | пустая строка | к псевдоэлементам :before и :after | нет |  | визуальный
'counter-increment' | [ <identifier> <integer>? ]+ | none | inherit | none |  | нет |  | визуальный
'counter-reset' | [ <identifier> <integer>? ]+ | none | inherit | none |  | нет |  | визуальный
'cue' | [ 'cue-before' || 'cue-after' ] | inherit | XX |  | нет |  | звуковой
'cue-after' | <uri> | none | inherit | none |  | нет |  | звуковой
'cue-before' | <uri> | none | inherit | none |  | нет |  | звуковой
'cursor' | [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit | auto |  | да |  | визуальный, интерактивный
'direction' | ltr | rtl | inherit | ltr | ко всем элементам, но см. др. информацию | да |  | визуальный
'display' | inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit | inline |  | нет |  | все
'elevation' | <angle> | below | level | above | higher | lower | inherit | level |  | да |  | звуковой
'empty-cells' | show | hide | inherit | show | к элементам 'table-cell' | да |  | визуальный
'float' | left | right | none | inherit | none | ко всем непозиционированным элементам и генерируемому содержимому | нет |  | визуальный
'font' | [ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit | см. индивидуальные свойства |  | да | допускается в 'font-size' и 'line-height' | визуальный
'font-family' | [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit | зависит от ПА (пользовательского агента) |  | да |  | визуальный
'font-size' | <absolute-size> | <relative-size> | <length> | <percentage> | inherit | medium |  | да, вычисляемое значение наследуется | относительно размера шрифта родительского элемента | визуальный
'font-size-adjust' | <number> | none | inherit | none |  | да |  | визуальный
'font-stretch' | normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit | normal |  | да |  | визуальный
'font-style' | normal | italic | oblique | inherit | normal |  | да |  | визуальный
'font-variant' | normal | small-caps | inherit | normal |  | да |  | визуальный
'font-weight' | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit | normal |  | да |  | визуальный
'height' | <length> | <percentage> | auto | inherit | auto | ко всем элементам, кроме незамещаемых инлайн-элементов, столбцов таблиц и групп столбцов | нет | см. дополнительную информацию | визуальный
'left' | <length> | <percentage> | auto | inherit | auto | к позиционированным элементам | нет | относительно ширины содержащего блока | визуальный
'letter-spacing' | normal | <length> | inherit | normal |  | да |  | визуальный
'line-height' | normal | <number> | <length> | <percentage> | inherit | normal |  | да | относительно размера шрифта этого элемента | визуальный
'list-style' | [ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit | XX | к элементам с 'display: list-item' | да |  | визуальный
'list-style-image' | <uri> | none | inherit | none | к элементам с 'display: list-item' | да |  | визуальный
'list-style-position' | inside | outside | inherit | outside | к элементам с 'display: list-item' | да |  | визуальный
'list-style-type' | disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit | disc | к элементам с 'display: list-item' | да |  | визуальный
'margin' | <margin-width>{1,4} | inherit | XX |  | нет | относительно ширины содержащего блока | визуальный
'margin-top' 'margin-right' 'margin-bottom' 'margin-left' | <margin-width> | inherit | 0 |  | нет | относительно ширины содержащего блока | визуальный
'marker-offset' | <length> | auto | inherit | auto | к элементам с 'display: marker' | нет |  | визуальный
'marks' | [ crop || cross ] | none | inherit | none | к контексту страницы | N/A |  | визуальный, страничный
'max-height' | <length> | <percentage> | none | inherit | none | ко всем элементам, кроме незамещаемых инлайн-элементов и элементов таблицы | нет | относительно высоты содержащего блока | визуальный
'max-width' | <length> | <percentage> | none | inherit | none | ко всем элементам, кроме незамещаемых инлайн-элементов и элементов таблицы | нет | относительно ширины содержащего блока | визуальный
'min-height' | <length> | <percentage> | inherit | 0 | ко всем элементам, кроме незамещаемых инлайн-элементов и элементов таблицы | нет | относительно высоты содержащего блока | визуальный
'min-width' | <length> | <percentage> | inherit | зависит от ПА | ко всем элементам, кроме незамещаемых инлайн-элементов и элементов таблицы | нет | относительно ширины содержащего блока | визуальный
'orphans' | <integer> | inherit | 2 | к элементам уровня блока | да |  | визуальный, страничный
'outline' | [ 'outline-color' || 'outline-style' || 'outline-width' ] | inherit | см. индивидуальные свойства |  | нет |  | визуальный, интерактивный
'outline-color' | <color> | invert | inherit | invert |  | нет |  | визуальный, интерактивный
'outline-style' | <border-style> | inherit | none |  | нет |  | визуальный, интерактивный
'outline-width' | <border-width> | inherit | medium |  | нет |  | визуальный, интерактивный
'overflow' | visible | hidden | scroll | auto | inherit | visible | к элементам уровня блока и к замещаемым | нет |  | визуальный
'padding' | <padding-width>{1,4} | inherit | XX |  | нет | относительно ширины содержащего блока | визуальный
'padding-top' 'padding-right' 'padding-bottom' 'padding-left' | <padding-width> | inherit | 0 |  | нет | относительно ширины содержащего блока | визуальный
'page' | <identifier> | auto | auto | к элементам уровня блока | да |  | визуальный, страничный
'page-break-after' | auto | always | avoid | left | right | inherit | auto | к элементам уровня блока | нет |  | визуальный, страничный
'page-break-before' | auto | always | avoid | left | right | inherit | auto | к элементам уровня блока | нет |  | визуальный, страничный
'page-break-inside' | avoid | auto | inherit | auto | к элементам уровня блока | да |  | визуальный, страничный
'pause' | [ [<time> | <percentage>]{1,2} ] | inherit | зависит от ПА |  | нет | см. описание 'pause-before' и 'pause-after' | звуковой
'pause-after' | <time> | <percentage> | inherit | зависит от ПА |  | нет | см. дополнительную информацию | звуковой
'pause-before' | <time> | <percentage> | inherit | зависит от ПА |  | нет | см. дополнительную информацию | звуковой
'pitch' | <frequency> | x-low | low | medium | high | x-high | inherit | medium |  | да |  | звуковой
'pitch-range' | <number> | inherit | 50 |  | да |  | звуковой
'play-during' | <uri> mix? repeat? | auto | none | inherit | auto |  | нет |  | звуковой
'position' | static | relative | absolute | fixed | inherit | static | ко всем элементам, кроме тех, которые генерируют содержимое | нет |  | визуальный
'quotes' | [<string> <string>]+ | none | inherit | зависит от ПА |  | да |  | визуальный
'richness' | <number> | inherit | 50 |  | да |  | звуковой
'right' | <length> | <percentage> | auto | inherit | auto | к позиционированным элементам | нет | относительно ширины содержащего блока | визуальный
'size' | <length>{1,2} | auto | portrait | landscape | inherit | auto | к контексту страницы | N/A |  | визуальный, страничный
'speak' | normal | none | spell-out | inherit | normal |  | да |  | звуковой
'speak-header' | once | always | inherit | once | к элементам, имеющим информацию "шапки" | да |  | звуковой
'speak-numeral' | digits | continuous | inherit | continuous |  | да |  | звуковой
'speak-punctuation' | code | none | inherit | none |  | да |  | звуковой
'speech-rate' | <number> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit | medium |  | да |  | звуковой
'stress' | <number> | inherit | 50 |  | да |  | звуковой
'table-layout' | auto | fixed | inherit | auto | к 'table' и 'inline-table' | нет |  | звуковой
'text-align' | left | right | center | justify | <string> | inherit | зависит от ПА и направления письма | к элементам уровня блока | да |  | визуальный
'text-decoration' | none | [ underline || overline || line-through || blink ] | inherit | none |  | нет (см. дополнительную информацию) |  | визуальный
'text-indent' | <length> | <percentage> | inherit | 0 | к элементам уровня блока | да | относительно ширины содержащего блока | визуальный
'text-shadow' | none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit | none |  | нет (см. дополнительную информацию) |  | визуальный
'text-transform' | capitalize | uppercase | lowercase | none | inherit | none |  | да |  | визуальный
'top' | <length> | <percentage> | auto | inherit | auto | к позиционированным элементам | нет | относительно высоты содержащего блока | визуальный
'unicode-bidi' | normal | embed | bidi-override | inherit | normal | ко всем элементам, но см. др. информацию | нет |  | визуальный
'vertical-align' | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit | baseline | к элементам инлайн уровня и к 'table-cell' | нет | относительно 'line-height' самого элемента | визуальный
'visibility' | visible | hidden | collapse | inherit | inherit |  | нет |  | визуальный
'voice-family' | [[<specific-voice> | <generic-voice> ],]* [<specific-voice> | <generic-voice> ] | inherit | зависит от ПА |  | да |  | звуковой
'volume' | <number> | <percentage> | silent | x-soft | soft | medium | loud | x-loud | inherit | medium |  | да | относительно унаследованного значения | звуковой
'white-space' | normal | pre | nowrap | inherit | normal | к элементам уровня блока | да |  | визуальный
'widows' | <integer> | inherit | 2 | к элементам уровня блока | да |  | визуальный, страничный
'width' | <length> | <percentage> | auto | inherit | auto | ко всем элементам, кроме незамещаемых инлайн-элементов, столбцов таблиц и групп столбцов | нет | относительно ширины содержащего блока | визуальный
'word-spacing' | normal | <length> | inherit | normal |  | да |  | визуальный
'z-index' | auto | <integer> | inherit | auto | к позиционированным элементам | нет |  | визуальный


Ссылки

Приложение E. Ссылки

Содержание

  • E.1 Нормативные ссылки
  • E.2 Информативные ссылки

E.1 Нормативные ссылки

[COLORIMETRY]
"Colorimetry, Second Edition", CIE Publication 15.2-1986, ISBN 3-900-734-00-3.
Находится на http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html.
[CSS1]
"Cascading Style Sheets, level 1", H. W. Lie and B. Bos, 17 декабря 1996.
Находится на http://www.w3.org/TR/REC-CSS1-961217.html.
[FLEX]
"Flex: The Lexical Scanner Generator", Версия 2.3.7, ISBN 1882114213.
[HTML40]
"HTML 4.0 Specification", D. Raggett, A. Le Hors, I. Jacobs, 8 июля 1997.
Находится на http://www.w3.org/TR/REC-html40/. В Рекомендациях находятся три Определения Типа Документу (ОТД): Strict/Строгое, Transitional/Переходное и Frameset/Набор Фрэймов, все доступны из Рекомендаций.
[IANA]
"Assigned Numbers", STD 2, RFC 1700, USC/ISI, J. Reynolds и J. Postel, октябрь 1994.
Находится на ftp://ftp.internic.net/rfc/rfc1700.txt.
[ICC32]
"ICC Profile Format Specification, версия 3.2", 1995.
Находится на ftp://sgigate.sgi.com/pub/icc/ICC32.pdf.
[ISO8879]
ISO 8879:1986 "Information Processing -- Text and Office Systems -- Standard Generalized Markup Language (SGML)", ISO 8879:1986.
Список мнемоник SGML см. на ftp://ftp.ifi.uio.no/pub/SGML/ENTITIES/.
[ISO10646]
"Information Technology - Universal Multiple- Octet Coded Character Set (UCS) - Часть 1: Architecture and Basic Multilingual Plane", ISO/IEC 10646-1:1993. В текущей спецификации принято к рассмотрению также пять поправок к ISO/IEC 10646-1:1993. Полезные документы карта BMP и карта плана 1 указывают, какой скрипт в каких числовых диапазонах размещён.
[PNG10]
"PNG (Portable Network Graphics) Specification, Version 1.0 specification", T. Boutell ed., 1 октябрь 1996.
Находится на http://www.w3.org/pub/WWW/TR/REC-png-multi.html.
[RFC1808]
"Relative Uniform Resource Locators", R. Fielding, июнь 1995.
Находится на ftp://ds.internic.net/rfc/rfc1808.txt.
[RFC2045]
"Multipurpose Internet Mail Extensions (MIME) Part One: Format of Internet Message Bodies", N. Freed and N. Borenstein, ноябрь 1996.
Находится на ftp://ftp.internic.net/rfc/rfc2045.txt. Обратите внимание, что этот RFC делает устаревшими RFC1521, RFC1522 и RFC1590.
[RFC2068]
"HTTP Version 1.1 ", R. Fielding, J. Gettys, J. Mogul, H. Frystyk Nielsen и T. Berners-Lee, январь 1997.
Находится на ftp://ftp.internic.net/rfc/rfc2068.txt.
[RFC2070]
"Internationalization of the HyperText Markup Language", F. Yergeau, G. Nicol, G. Adams, и M. Dürst, январь 1997.
Находится на ftp://ds.internic.net/rfc/rfc2070.txt.
[RFC2119]
"Key words for use in RFCs to Indicate Requirement Levels", S. Bradner, март 1997.
Находится на ftp://ds.internic.net/rfc/rfc2119.txt.
[RFC2318]
"The text/css Media Type", H. Lie, B. Bos, C. Lilley, март 1998.
Находится на ftp://ds.internic.net/rfc/rfc2318.txt.
[RFC1738]
"Uniform Resource Locators", T. Berners-Lee, L. Masinter и M. McCahill, декабрь 1994.
Находится на ftp://ds.internic.net/rfc/rfc1738.txt.
[SRGB]
"Proposal for a Standard Color Space for the Internet - sRGB", M. Anderson, R. Motta, S. Chandrasekar, M. Stokes.
Находится на http://www.w3.org/Graphics/Color/sRGB.html.
[UNICODE]
"The Unicode Standard: Version 2.0", The Unicode Consortium, Addison-Wesley Developers Press, 1996. О двунаправленности см. также список на http://www.unicode.org/unicode/uni2errata/bidi.htm. См. дополнительную информацию на домашней странице Unicode Consortium http://www.unicode.org/.
Это последняя версия Unicode. См. дополнительную информацию на домашней странице Unicode Consortium http://www.unicode.org/.
[URI]
"Uniform Resource Identifiers (URI): Generic Syntax and Semantics", T. Berners-Lee, R. Fielding, L. Masinter, 18 ноября 1997.
Находится на http://www.ics.uci.edu/pub/ietf/uri/draft-fielding-uri-syntax-01.txt. Эта работа ещё продолжается и предположительно обновит [RFC1738] и [RFC1808].
[XML10]
"Extensible Markup Language (XML) 1.0" T. Bray, J. Paoli, C.M. Sperberg-McQueen, редакторы, 10 февраля 1998.
Находится на http://www.w3.org/TR/REC-xml/.
[YACC]
"YACC - Yet another compiler compiler", S. C. Johnson, Technical Report, Murray Hill, 1975.

E.2 Информативные ссылки

[CHARSETS]
Зарегистрированные значения наборов символов. Загрузите список зарегистрированных значений наборов символов с ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets.
[DOM]
"Document Object Model Specification", L. Wood, A. Le Hors, 9 октябрь 1997.
Находится на http://www.w3.org/TR/WD-DOM/
[ISO10179]
ISO/IEC 10179:1996 "Information technology -- Processing languages -- Document Style Semantics and Specification Language (DSSSL)"
Находится на http://occam.sjf.novell.com:8080/dsssl/dsssl96.
[GAMMA]
"Gamma correction on the Macintosh Platform", C. A. Poynton.
Находится на ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf.
[HTML32]
"HTML 3.2 Reference Specification", Dave Raggett, 14 январь 1997.
Находится на http://www.w3.org/TR/REC-html32.html.
[INFINIFONT]
См. http://www.fonts.com/hp/infinifont/moredet.html.
[ISO9899]
ISO/IEC 9899:1990 Programming languages -- C.
[MONOTYPE]
См. http://www.monotype.com/html/oem/uni_scrmod.html.
[NEGOT]
"Transparent Content Negotiation in HTTP", K. Holtman, A. Mutz, 9 март, 1997.
Находится на http://gewis.win.tue.nl/~koen/conneg/draft-ietf-http-negotiation-01.html.
[OPENTYPE]
См. http://www.microsoft.com/OpenType/OTSpec/tablist.htm.
[PANOSE]
Информацию о метриках классификации PANOSE см. на http://www.fonts.com/hp/panose/greybook и следующие главы: Latin Text, Latin Script, Latin Decorative и Latin Pictorial.

Числа Panose для некоторых шрифтов доступны online и могут быть запрошены.

[PANOSE2]
См. http://www.w3.org/Fonts/Panose/pan2.html Panose-2 не ограничен латиницей.
[POSTSCRIPT]
"The PostScript Language Reference Manual", Second Edition, Adobe Systems, Inc., Addision-Wesley Publishing Co., декабрь 1990.
[RFC1630]
"Universal Resource Identifiers in WWW: A Unifying Syntax for the Expression of Names and Addresses of Objects on the Network as used in the World-Wide Web", T. Berners-Lee, июнь 1994.
Находится на ftp://ftp.internic.net/rfc/rfc1630.txt.
[RFC1766]
"Tags for the Identification of Languages", H. Alvestrand, март 1995.
Находится на ftp://ftp.internic.net/rfc/rfc1766.txt.
[RFC1866]
"HyperText Markup Language 2.0", T. Berners-Lee и D. Connolly, ноябрь 1995.
Находится на ftp://ds.internic.net/rfc/rfc1866.txt.
[RFC1942]
"HTML Tables", Dave Raggett, май 1996.
Находится на ftp://ds.internic.net/rfc/rfc1942.txt.
[TRUETYPEGX]
На http://fonts.apple.com/TTRefMan/index.html см. детальную информацию о TrueType GX от Apple Computer, включая описания добавленных таблиц и спецификации качества шрифта.
[W3CSTYLE]
W3C, страница ресурсов о таблицах стилей web.
См. на http://www.w3.org/pub/WWW/Style.
[WAI-PAGEAUTH]
"WAI Accesibility Guidelines: Page Authoring" для дизайна доступны с:
http://www.w3.org/TR/WD-WAI-PAGEAUTH.


Приложение А: Образец таблицы стилей для HTML 4.0

Приложение А.
Образец таблицы стиля для HTML 4.0

Данное приложение является информативным, но не нормативным.

Эта таблица стилей описывает типичное форматирование для всех элементов HTML 4.0 ([HTML40]), базирующееся на обширных исследованиях текущей практики работы пользовательских агентов (ПА). Разработчикам предлагается использовать её как таблицу стилей по умолчанию.

Полное представление некоторых элементов HTML невозможно в CSS2, в том числе - заменяемых элементов (IMG, OBJECT), элементов скриптинга (SCRIPT, APPLET), элементов формы и элементов фрэймов.

ADDRESS,
BLOCKQUOTE,
BODY, DD, DIV,
DL, DT,
FIELDSET, FORM,
FRAME, FRAMESET,
H1, H2, H3, H4,
H5, H6, IFRAME,
NOFRAMES,
OBJECT, OL, P,
UL, APPLET,
CENTER, DIR,
HR, MENU, PRE   { display: block }
LI              { display: list-item }
HEAD            { display: none }
TABLE           { display: table }
TR              { display: table-row }
THEAD           { display: table-header-group }
TBODY           { display: table-row-group }
TFOOT           { display: table-footer-group }
COL             { display: table-column }
COLGROUP        { display: table-column-group }
TD, TH          { display: table-cell }
CAPTION         { display: table-caption }
TH              { font-weight: bolder; text-align: center }
CAPTION         { text-align: center }
BODY            { padding: 8px; line-height: 1.33 }
H1              { font-size: 2em; margin: .67em 0 }
H2              { font-size: 1.5em; margin: .83em 0 }
H3              { font-size: 1.17em; margin: 1em 0 }
H4, P,
BLOCKQUOTE, UL,
FIELDSET, FORM,
OL, DL, DIR,
MENU            { margin: 1.33em 0 }
H5              { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
H6              { font-size: .67em; margin: 2.33em 0 }
H1, H2, H3, H4,
H5, H6, B,
STRONG          { font-weight: bolder }
BLOCKQUOTE      { margin-left: 40px; margin-right: 40px }
I, CITE, EM,
VAR, ADDRESS    { font-style: italic }
PRE, TT, CODE,
KBD, SAMP       { font-family: monospace }
PRE             { white-space: pre }
BIG             { font-size: 1.17em }
SMALL, SUB, SUP { font-size: .83em }
SUB             { vertical-align: sub }
SUP             { vertical-align: super }
S, STRIKE, DEL  { text-decoration: line-through }
HR              { border: 1px inset }
OL, UL, DIR,
MENU, DD        { margin-left: 40px }
OL              { list-style-type: decimal }
OL UL, UL OL,
UL UL, OL OL    { margin-top: 0; margin-bottom: 0 }
U, INS          { text-decoration: underline }
CENTER          { text-align: center }
BR:before       { content: "\A" }

/* Пример стиля для элементов HTML 4.0 ABBR/ACRONYM */

ABBR, ACRONYM   { font-variant: small-caps; letter-spacing: 0.1em }
A[href]         { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Начало установок двунаправленности (не изменять) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

/* Элементы уровня блока в HTML4 */
ADDRESS, BLOCKQUOTE, BODY, DD, DIV, DL, DT, FIELDSET,
FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, IFRAME,
NOSCRIPT, NOFRAMES, OBJECT, OL, P, UL, APPLET, CENTER,
DIR, HR, MENU, PRE, LI, TABLE, TR, THEAD, TBODY, TFOOT,
COL, COLGROUP, TD, TH, CAPTION
                { unicode-bidi: embed }
/* Конец установок bidi */

@media print {
  @page         { margin: 10% }
  H1, H2, H3,
  H4, H5, H6    { page-break-after: avoid; page-break-inside: avoid }
  BLOCKQUOTE,
  PRE           { page-break-inside: avoid }
  UL, OL, DL    { page-break-before: avoid }
}

@media speech {
  H1, H2, H3,
  H4, H5, H6    { voice-family: paul, male; stress: 20; richness: 90 }
  H1            { pitch: x-low; pitch-range: 90 }
  H2            { pitch: x-low; pitch-range: 80 }
  H3            { pitch: low; pitch-range: 70 }
  H4            { pitch: medium; pitch-range: 60 }
  H5            { pitch: medium; pitch-range: 50 }
  H6            { pitch: medium; pitch-range: 40 }
  LI, DT, DD    { pitch: medium; richness: 60 }
  DT            { stress: 80 }
  PRE, CODE, TT { pitch: medium; pitch-range: 0; stress: 0; richness: 80 }
  EM            { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
  STRONG        { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
  DFN           { pitch: high; pitch-range: 60; stress: 60 }
  S, STRIKE     { richness: 0 }
  I             { pitch: medium; pitch-range: 60; stress: 60; richness: 50 }
  B             { pitch: medium; pitch-range: 60; stress: 90; richness: 90 }
  U             { richness: 0 }
  A:link        { voice-family: harry, male }
  A:visited     { voice-family: betty, female }
  A:active      { voice-family: betty, female; pitch-range: 80; pitch: x-high }
}


Селекторы

5 Селекторы

Содержание

  • 5.1 Блоки символов для подстановки
  • 5.2 Синтаксис селектора
    • 5.2.1 Группирование
  • 5.3 Универсальный селектор
  • 5.4 Селекторы типа
  • 5.5 Селекторы потомков
  • 5.6 Селекторы дочерних элементов
  • 5.7 Смежные селекторы родственники
  • 5.8 Селекторы атрибутов
    • 5.8.1 Совпадение атрибутов и их значений
    • 5.8.2 Значения по умолчанию для атрибутов в ОТД
    • 5.8.3 Селекторы класса
  • 5.9 Селекторы ID
  • 5.10 Псевдоэлементы и псевдоклассы
  • 5.11 Псевдоклассы
    • 5.11.1 Псевдокласс :first-child
    • 5.11.2 Псевдоклассы гиперссылки :link и :visited
    • 5.11.3 Динамические псевдоклассы :hover, :active и :focus
    • 5.11.4 Псевдокласс языка :lang
  • 5.12 Псевдоэлементы
    • 5.12.1 Псевдоэлемент :first-line
    • 5.12.2 Псевдоэлемент :first-letter
    • 5.12.3 Псевдоэлементы :before и :after

5.1 Блоки символов для подстановки

В CSS правила совпадения символов определяют, какое правило стиля применить к элементам дерева документа. Такие блоки символов (патэрн), называемые селекторами, могут иметь диапазон имён от простых имён элементов до сложных контекстуальных блоков. Если все условия в патэрн верны для конкретного элемента, селектор совпадает с элементом.

Чувствительность к регистру имён элементов в селекторах зависит от языка документа. Например, в HTML имена элементов нечувствительны к регистру, а в XML - чувствительны к регистру.

В этой таблице суммирован синтаксис селекторов CSS2:

Патэрн | Смысл | Описан в разделе
* | Совпадает любой элемент. | Универсальный селектор
E | Совпадает любой элемент E (т.е. элемент типа E). | Типы селекторов
E F | Совпадает любой элемент F, являющийся потомком элемента E. | Селекторы-потомки
E > F | Совпадает любой элемент F, являющийся дочерним относительно элемента E. | Дочерние селекторы
E:first-child | Совпадает элемент E, если E является первым дочерним элементом своего родителя. | Псевдокласс :first-child
E:link E:visited | Совпадает элемент E, если E является якорем ещё не посещённого ресурса гиперссылки (:link) или уже посещённого (:visited). | Псевдоклассы гиперссылки
E:active E:hover E:focus | Совпадает элемент E во время определённых действий пользователя. | Динамические псевдоклассы
E:lang(c) | Совпадает элемент типа E, если он на (человеческом) языке с (язык документа специфицирует то, как определяется язык). | Псевдокласс :lang()
E + F | Совпадает любой элемент F, непосредственно перед которым идёт элемент E. | Смежные селекторы
E[foo] | Совпадает любой элемент E с установленным атрибутом "foo" (с каким-либо значением). | Селекторы атрибутов
E[foo="warning"] | Совпадает любой элемент E, чьё значение атрибута "foo" точно равно "warning". | Селекторы атрибутов
E[foo~="warning"] | Совпадает любой элемент E, чьё значение атрибута "foo" является списком разделённых пробелами значений, одно из которых точно равно "warning". | Селекторы атрибутов
E[lang|="en"] | Совпадает любой элемент E, чей атрибут "lang" содержит список разделённых дефисами значений, начинающийся (слева) с "en". | Селекторы атрибутов
DIV.warning | Только в HTML. То же, что DIV[class~="warning"]. | Селекторы классов
E#myid | Совпадает любой ID элемента E, эквивалентный "myid". | Селекторы ID

5.2 Синтаксис селектора

Простой селектор - селектор типа или универсальный селектор, непосредственно после которого идёт ноль или более селекторов атрибутов, селекторов ID или псевдоклассов в любом порядке. Простой селектор совпадает, если совпадают все его компоненты.

Селектор это цепь из одного или более простых селекторов, разделённых комбинаторами. Комбинаторами являются: пробелы, ">" и "+". Пробелы могут появляться между комбинатором и простыми селекторами вокруг него.

Элементы дерева документов, совпадающие с селектором, называются субъектами селектора. Селектор, состоящий из одного простого селектора, совпадает с любым элементом, удовлетворяющим его условиям. Предопределённость простого селектора и комбинатора в цепи вызывает дополнительные ограничения для совпадения, так что субъекты селектора всегда являются поднабором элементов, совпадающим с самым правым простым селектором.

Один псевдоэлемент может быть присоединён к последнему простому селектору в цепи, и в этом случае информация стиля применяется к подразделу каждого субъекта.

5.2.1 Группирование

Если несколько селекторов используют общие объявления, то они могут быть сгруппированы в список с разделением запятыми.

Пример(ы):

Здесь три правила с идентичными объявлениями собраны в одно. Таким образом,

H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }

эквивалентно:

H1, H2, H3 { font-family: sans-serif }

CSS предлагает также другие механизмы "сокращений", включая множественные объявления и сокращённые свойства.

5.3 Универсальный селектор

Универсальный селектор, записываемый "*", совпадает с именем любого типа элемента. Он совпадает с любым простым элементом в дереве документа.

Универсальный селектор не является единственным компонентом простого селектора, символ "*" может быть опущен. Например:

  • *[LANG=fr] и [LANG=fr] эквивалентны.
  • *.warning и .warning эквивалентны.
  • *#myid и #myid эквивалентны.

5.4 Селекторы типа

Селектор типа совпадает с именем типа элемента языка документа. Селектор типа совпадает с каждым вхождением типа элемента в дереве документа.

Пример(ы):

Следующее правило совпадает со всеми элементами H1 в дереве документа:

H1 { font-family: sans-serif }

5.5 Селекторы потомков

Авторам может понадобиться, чтобы селекторы совпадали с элементом, который является потомком другого элемента в дереве документа (например, "Совпадать с теми элементами EM, которые содержаться в элементе H1"). Селекторы потомков выражают следующие взаимоотношения в патэрн. Селектор потомков состоит из двух или более селекторов, разделённых пробелами. Селектор потомков "A B" совпадает, если элемент B является произвольным потомком некоторого элемента-предка A.

Пример(ы):

Рассмотрим следующие правила:

H1 { color: red }
EM { color: red }

Хотя смысл этих правил в том, чтобы выделять текст путём изменения его цвета, в следующем случае эффект не будет достигнут:

<H1>This headline is <EM>very</EM> important</H1>

В этом случае мы дополняем предыдущие правила правилом, которое устанавливает голубой цвет текста, если EM появляется где-либо внутри H1:

H1 { color: red }
EM { color: red }
H1 EM { color: blue }

Третье правило совпадёт с элементом EM в следующем фрагменте:

<H1>This <SPAN class="myclass">headline
is <EM>very</EM> important</SPAN></H1>

Пример(ы):

Следующий селектор:

DIV * P

совпадает с элементом P, который является внуком, или позднейшим потомком, элемента DIV. Обратите внимание на пробелы с каждой стороны от "*".

Пример(ы):

Селектор в следующем правиле, сочетающий селекторы потомка и атрибута, совпадает с любым элементом, имеющим (1) установленный атрибут "href" и (2) находящимся внутри P, который сам находится внутри DIV:

DIV P *[href]

5.6 Селекторы дочерних элементов

Селектор дочерних элементов совпадает, если элемент является дочерним относительно другого элемента. Селектор дочерних элементов состоит из двух или более селекторов, разделённых символом ">".

Пример(ы):

Это правило устанавливает стиль всех элементов P, являющихся дочерними относительно BODY:

BODY > P { line-height: 1.3 }

Пример(ы):

Здесь сочетаются селекторы потомков и селекторы дочерних элементов:

DIV OL>LI P

Здесь селектор совпадает с элементом P, являющимся потомком LI; элемент LI обязан быть дочерним относительно элемента OL; элемент OL обязан быть потомком DIV.
Обратите внимание, что необязательные пробелы вокруг комбинатора ">" опущены.

Информацию о выборе первого дочернего элемента данного элемента см. ниже в разделе о псевдоклассе :first-child.

5.7 Смежные селекторы-родственники

Смежные селекторы-родственники имеют следующий синтаксис: E1 + E2, где E2 является субъектом селектора. Селектор совпадает, если E1 и E2 имеют одного общего предка в дереве документа и E1 непосредственно предшествует E2.

В определённых контекстах смежные элементы генерируют форматированные объекты, чьё представление обрабатывается автоматически (например, сжатие вертикальных полей между смежными боксами). Селектор "+" позволяет авторам специфицировать дополнительный стиль для смежных элементов.

Пример(ы):

Так, следующее правило указывает, что если элемент P следует непосредственно за элементом MATH, то он не должен учитываться:

MATH + P { text-indent: 0 }

Следующий пример уменьшает вертикальное пространство, разделяющее H1 и H2:

H1 + H2 { margin-top: -5mm }

Пример(ы):

Следующее правило аналогично одному из вышеприведённых примеров, за исключением того, что оно добавляет селектор атрибута. Таким образом, специальное форматирование возникает только тогда, когда H1 имеет class="opener":

H1.opener + H2 { margin-top: -5mm }

5.8 Селекторы атрибутов

CSS2 позволяет авторам специфицировать правила, которые определяют совпадение атрибутов, определённых в документе-источнике.

5.8.1 Совпадение атрибутов и их значений

Селекторы атрибутов могут совпадать четырьмя способами:

[att]
Если элемент устанавливает атрибут "att" с каким-либо значением атрибута.
[att=val]
Если значение атрибута "att" элемента - точно "val".
[att~=val]
Если значение атрибута "att" элемента - список разделённых пробелами "слов", одно из которых - "val". Если используется данный селектор, то слова в значении обязаны не содержать пробелов (поскольку они сами разделяются пробелами).
[att|=val]
Если значения атрибута "att" элемента - список разделённых дефисами "слов", начинающийся с "val". Совпадение всегда стартует от начала значения атрибута. Это принимается во внимание прежде всего для того, чтобы позволить совпасть субкоду языка (например, атрибут "lang" в HTML), как описано в RFC 1766 ([RFC1766]).

Значением атрибута обязана быть строка или идентификатор. Чувствительность к регистру имён атрибутов и значений в селекторах зависит от языка документа.

Пример(ы):

Следующий селектор атрибута совпадает со всеми элементами H1, которые специфицировали атрибут "title" с любым значением:

H1[title] { color: blue; }

Пример(ы):

Здесь селектор совпадает со всеми элементами SPAN, чей атрибут "class" имеет значение "example":

SPAN[class=example] { color: blue; }

Несколько селекторов атрибута могут использовать для обращения к различным атрибутам элемента, или даже несколько раз к одному и тому же атрибуту.

Пример(ы):

Здесь селектор совпадает со всеми элементами SPAN, чей атрибут "hello" имеет значение "Cleveland" и чей атрибут "goodbye" имеет значение "Columbus":

SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

Пример(ы):

Следующие селекторы иллюстрируют разницу между "=" и "~=". первый селектор совпадает, к примеру, со значением "copyright copyleft copyeditor" атрибута "rel". Второй селектор совпадает только тогда, когда атрибут "href" имеет значение "http://www.w3.org/".

A[rel~="copyright"]
A[href="http://www.w3.org/"]

Пример(ы):

Следующее правило скрывает все элементы, у которых атрибут "lang" имеет значение "fr" (т.е. язык - французский).

*[LANG=fr] { display : none }

Пример(ы):

Следующее правило совпадает для значений атрибута "lang", начинающихся с "en", включая "en", "en-US" и "en-cockney":

*[LANG|="en"] { color : red }

Пример(ы):

Таким же образом, следующие правила звуковой таблицы стилей позволяют громко читать скрипт различными для каждой роли голосами:

DIALOGUE[character=romeo]
     { voice-family: "Lawrence Olivier", charles, male }

DIALOGUE[character=juliet]
     { voice-family: "Vivien Leigh", victoria, female }

5.8.2 Значения по умолчанию для атрибутов в ОТД

Совпадение происходит в значениях атрибутов в дереве документа. Для языков документа, отличных от HTML, значения по умолчанию для атрибутов могут определяться в ОТД или где-либо ещё. Таблицы стилей должны создаваться так, чтобы они работали даже тогда, когда значения по умолчанию не включены в дерево документа.

Пример(ы):

Рассмотрим элемент EXAMPLE с атрибутом "notation", имеющим значение по умолчанию "decimal".
Фрагмент ОТД может быть таким:

<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">

Если таблица стилей содержит правила

EXAMPLE[notation=decimal] { /*... установки по умолчанию для свойства ...*/ }
EXAMPLE[notation=octal] { /*... другие установки ...*/ }

тогда, чтобы отобрать случаи, когда атрибут установлен по умолчанию, а не явно, можно добавить следующее правило:

EXAMPLE { /*... значения по умолчанию для свойства  ...*/ }

Поскольку этот селектор менее специфичен, чем селектор атрибута, он будет использоваться только для случаев установки значения по умолчанию. Это делается для того, чтобы все другие значения атрибута, не получающие тот же стиль, что и стиль по умолчанию, были охвачены явно.

5.8.3 Селекторы класса

В таблицах стилей, используемых в HTML, авторы могут употреблять точку (.) как альтернативу "~=" при совпадении с атрибутом "class". Таким образом, в HTML "DIV.value" и "DIV[class~=value]" имеют одно значение. Значение атрибута обязано следовать сразу за ".".

Пример(ы):

Мы можем назначить стилевую информацию всем элементам class~="pastoral" следующим образом:

*.pastoral { color: green }  /* все элементы с class~=pastoral */
или просто
.pastoral { color: green }  /* все элементы с class~=pastoral */

Следующее - назначает стиль только элементам H1 с class~="pastoral":

H1.pastoral { color: green }  /* элементы H1 с class~=pastoral */

При назначении эти правил первое вхождение H1 ниже не имеет зелёного цвета текста, а второе - имеет:

<H1>Not green</H1>
<H1 class="pastoral">Very green</H1>

Чтобы совпасть с поднабором значений "class", каждое значение обязано иметь предшествующую ".".

Пример(ы):

Следующее правило совпадает с любым элементом P, чей атрибут "class" сопоставлен списку разделённых пробелами значений "pastoral" и "marine":

 P.pastoral.marine { color: green }

Правило совпадает, если class="pastoral blue aqua marine", но не совпадает class="pastoral blue".

Примечание. CSS даёт такую мощь атрибуту "class", что авторы могут создавать свои собственные "языки документа" на базе элементов с почти не ассоциированным представлением (таких как DIV и SPAN в HTML) и назначать стилевую информацию через атрибут "class". Авторам следует избегать такой практики, поскольку структурные элементы языка документа часто имеют распознаваемые и принимаемые значения, а классы, определённые авторами - не могут.

5.9 Селекторы ID

Языки документов могут содержать атрибуты, которые объявлены как имеющие тип ID. Особенностью атрибутов типа ID является то, что они могут иметь одно значение; независимо от языка документа, атрибут ID может использоваться для уникальной идентификации элемента. В HTML все атрибуты ID именуются "id"; приложения XML могут именовать атрибуты ID по-разному, но с применением одинаковых ограничений.

Атрибут ID языка документа позволяет авторам назначать идентификатор объекту элемента в дереве документа. В CSS ID-селекторы совпадают с объектом элемента на базе идентификатора. ID-селектор CSS содержит "#" непосредственно перед значением ID.

Пример(ы):

Следующий ID-селектор совпадает с элементом H1, чей атрибут ID имеет значение "chapter1":

H1#chapter1 { text-align: center }

В следующем пример правило таблицы стилей устанавливает совпадение элементом, чьё значение ID - "z98y". Правило, таким образом, совпадает для элемента P:

<HEAD>
  <TITLE>Match P</TITLE>
  <STYLE type="text/css">
    *#z98y { letter-spacing: 0.3em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Wide text</P>
</BODY>

В следующем пример, однако, правило стиля совпадает только с тем элементом H1, который имеет значение ID - "z98y". Правило в этом примере не совпадает с элементом P:

<HEAD>
  <TITLE>Match H1 only</TITLE>
  <STYLE type="text/css">
    H1#z98y { letter-spacing: 0.5em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Wide text</P>
</BODY>

ID-селекторы имеют более высокий приоритет, чем селекторы атрибутов. Например, в HTML селектор #p123 более специфичен, чем [ID=p123], в терминах каскада.

Примечание. В XML 1.0 [XML10] информация о том, какой атрибут содержит ID-ы элемента, находится в ОТД. При разборе XML, ПА не всегда читают ОТД и поэтому могут не знать, какой ID у элемента. Если дизайнер таблицы стилей знает или предполагает, что это именно данный случай, он должен использовать нормальные селекторы атрибутов: [name=p371] вместо #p371. Однако каскадный порядок нормальных селекторов атрибутов отличается от ID-селекторов. Может понадобиться добавить приоритет "!important" в объявления: [name=p371] {color: red ! important}. Конечно, элементы в документах XML 1.без ОТД не имеют ID-ов вообще.

5.10 Псевдоэлементы и псевдоклассы

В CSS2 стиль обычно присоединяется к элементу на базе его позиции в дереве документа. Этой простой модели во многих случаях достаточно, но некоторые обычные сценарии могут оказаться недоступными из-за структуры дерева документа. Например, в HTML 4.0 (см. [HTML40]) нет элементов, относящихся к первой строке параграфа, и, следовательно, простой селектор CSS не может с ним соотноситься.

CSS вводит псевдоэлементы и псевдоклассы, чтобы разрешить форматирование на базе информации, находящейся вне дерева документа.

  • Псевдоэлементы создают абстракции дерева документа наряду с абстракциями, специфицированными языком документа. Например, языки документа не имеют механизмов для доступа к первой букве или первой строке содержимого элемента . Псевдоэлементы CSS позволяют дизайнерам таблиц стилей получить доступ к информации, иначе не доступной. Псевдоэлементы могут также предоставить способ назначить стиль содержимому, которое не существует в документе-источнике (например, псевдоэлементы :before и :after дают доступ к генерируемому содержимому).
  • Псевдоклассы классифицируют элементы не по их именам, атрибутам или содержимому, а по другим характеристикам ; по характеристикам, которые в принципе не могут быть получены из дерева документа. Псевдоклассы могут быть динамическими в предположении, что элемент может получить или потерять псевдокласс, пока пользователь взаимодействует с документом. Исключением является ':first-child', который может быть вычислен из дерева документа.

Ни псевдоэлементы, ни псевдоклассы не появляются в документе-источнике или в дереве документа.

Псевдоклассы допустимы в селекторах везде, в то время как псевдоэлементы могут появляться только после субъекта селектора.

Имена псевдоэлементов и псевдоклассов нечувствительны к регистру.

Некоторые псевдоклассы взаимоисключающи, а другие могут применяться одновременно в одном и том же элементе. В случае конфликта правил, нормальный порядок каскадирования определяет выход.

ПА, соответствующие HTML могут игнорировать все правила с селекторами :first-line или :first-letter или, альтернативно, могут поддерживать только поднаборы свойств этих псевдоэлементов.

5.11 Псевдоклассы

5.11.1 Псевдокласс :first-child

Псевдокласс :first-child совпадает с элементом, являющимся первым дочерним элементом какого-либо другого элемента.

Пример(ы):

Здесь селектор совпадает с любым элементом P, являющимся первым дочерним элементом элемента DIV. Правило подавляет отступ для первого параграфа DIV:

DIV > P:first-child { text-indent: 0 }
Следующий селектор может совпасть с элементом P внутри DIV в следующем фрагменте:
<P> Последний P перед note.
<DIV class="note">
   <P> Первый P внутри note.
</DIV>
но не совпадёт со вторым P в следующем фрагменте:
<P> Последний P перед note.
<DIV class="note">
   <H2>Note</H2>
   <P> Первый P внутри note.
</DIV>

Пример(ы):

Следующее правило устанавливает вес шрифта 'bold' для любого элемента EM, являющегося каким-либо потомком элемента P, который, в свою очередь, является первым дочерним элементом:

P:first-child EM { font-weight : bold }

Заметьте, что анонимные боксы не являются частью дерева документа, они не учитываются при вычислении первого дочернего элемента.

Например, EM в:

<P>abc <EM>default</EM>
является первым дочерним элементом от P.

Следующие два раздела эквивалентны:

* > A:first-child   /* первый дочерний элемент любого элемента */
A:first-child       /* То же самое */

5.11.2 Псевдоклассы гиперссылки: :link и :visited

ПА обычно отображают непосещённые гиперссылки иначе, чем посещённые. CSS имеет псевдоклассы ':link' и ':visited' для этих случаев:

  • Псевдокласс :link применяется к ссылкам, которые ещё не посещены.
  • Псевдокласс :visited применяется после того, как пользователь посетил ссылку.

Примечание. По истечении некоторого времени ПА могут вернуть посещённую гиперссылку к первоначальному состоянию (непосещённому) ':link'.

Эти два состояния взаимоисключающи.

Язык документа определяет, какие элементы являются якорями ссылки на ресурс. Например, в HTML 4.0 псевдоклассы гиперссылки применяются к элементам A с атрибутом "href". Таким образом, следующие два объявления CSS2 имеют один эффект:

A:link { color: red }
:link  { color: red }

Пример(ы):

Если следующая ссылка:

<A class="external" href="http://out.side/">external link</A>
будет посещена, то данное правило:
A.external:visited { color: blue }
сделает её голубой.

5.11.3 Динамические псевдоклассы: :hover, :active и :focus

Интерактивные ПА иногда изменяют представление в ответ на действия пользователя. CSS имеет три псевдокласса для общих случаев:

  • Псевдокласс :hover применяется, если указал на элемент (каким-либо указательным устройством), но не активировал его. Например, визуальный ПА может применить этот псевдокласс, когда курсор (указатель мыши) проходит над боксом, сгенерированным элементом. ПА, не поддерживающие интерактивные носители, не должны поддерживать этот псевдокласс. Некоторые соответствующие ПА, поддерживающие интерактивные носители, могут оказаться неспособными поддерживать этот псевдокласс (например, устройство "карандаш").
  • Псевдокласс :active применяется, если элемент активирован пользователем. Например, между нажатием и отпусканием пользователем клавиши мыши.
  • Псевдокласс :focus применяется, если элемент имеет фокус (принял событие от клавиатуры или другие формы ввода текста).

Эти псевдоклассы не являются взаимоисключающими. Элемент может совпадать с несколькими из них одновременно.

CSS не определяет, какие элементы могут быть в вышеуказанных состояниях и как осуществляется вход и выход из этих состояний. Сценарий может меняться в зависимости от того, реагирует элемент на действия пользователя или нет, и различные устройства и ПА могут иметь разные способы указания на элементы (их активации).

От ПА не требуется перерисовывать отображаемый в данный момент документ из-за переносов псевдоклассов. Например, таблица стилей может специфицировать, что 'font-size' гиперссылки :active должен быть больше, чем у неактивной гиперссылки, но поскольку это может вызвать изменение положения букв при выборе пользователем гиперссылки, ПА может проигнорировать соответствующее правило стиля.

Пример(ы):

A:link    { color: red }    /* непосещённые ссылки */
A:visited { color: blue }   /* посещённые ссылки   */
A:hover   { color: yellow } /* пользователь провёл над */
A:active  { color: lime }   /* активные ссылки    */

Заметьте, что A:hover обязан размещаться после правил A:link и A:visited, поскольку иначе правила каскадирования спрячут свойство 'color' правила A:hover. Аналогично, поскольку A:active размещено после A:hover, цвет активной ссылки (lime) будет применён, когда пользователь и активирует и проведёт над элементом A.

Пример(ы):

Пример комбинации динамических псевдоклассов:

A:focus { background: yellow }
A:focus:hover { background: white }

Последний селектор совпадает с элементами A, которые входят в псевдоклассы :focus и :hover.

О представлении контуров фокуса см. раздел динамические контуры фокуса.

Примечание. В CSS1 псевдокласс ':active' взаимно исключался с ':link' и ':visited'. Сейчас это уже не так. Элемент может быть и ':visited', и ':active' (или ':link' и ':active'), и нормальные правила каскадирования определяют применение свойств.

5.11.4 Псевдокласс языка :lang

Если язык документа специфицирует, как определяется человеческий язык, то становится возможным записывать селекторы CSS, которые совпадают с элементом, на базе его языка. Например, в HTML [HTML40] язык определяется комбинацией атрибута "lang", элемента META и, возможно, информацией из протокола (такой как в "шапках" HTTP). XML использует атрибут, называемый XML:LANG, и могут быть также и другие методы определения языка, зависящие от языковой специфики.

Псевдокласс ':lang(C)' совпадает, если документ написан на языке C. Здесь C - это код языка, как специфицировано в HTML 4.0 [HTML40] и RFC 1766 [RFC1766]. Он совпадает тем же способом, что и для оператора '|='.

Пример(ы):

Следующие правила устанавливают знаки кавычек для документа HTML на французском или немецком языке:

HTML:lang(fr) { quotes: '« ' ' »' }
HTML:lang(de) { quotes: '»' '«' '\2039' '\203A' }
:lang(fr) > Q { quotes: '« ' ' »' }
:lang(de) > Q { quotes: '»' '«' '\2039' '\203A' }

Вторая пара правил в действительности устанавливает свойство 'quotes' элементов Q в соответствии с языком его предка. Так делается, потому что выбор знаков кавычек обычно базируется на языке элемента, окружающего кавычки, а не самих кавычек, и кусок французского текста “à l'improviste” в середине английского текста использует английские знаки кавычек.

5.12 Псевдоэлементы

5.12.1 Псевдоэлемент :first-line

Псевдоэлемент :first-line применяет специальный стиль к первой форматированной строке параграфа. К примеру:

P:first-line { text-transform: uppercase }

Это правило говорит: "Перевести буквы первой строки каждого параграфа в верхний регистр". Однако селектор "P:first-line" не совпадёт ни с каким реальным элементом HTML. Он совпадёт с псевдоэлементом, который соответствующие ПА будут вставлять в начале каждого параграфа.

Заметьте, что длина первой строки зависит от нескольких факторов, включая ширину страницы, размер шрифта и т.д. Таким образом, обычный параграф HTML:

<P>This is a somewhat long HTML
paragraph that will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</P>
строки которого могут быть разбиты так:
THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
will be broken into several lines. The first
line will be identified by a fictional tag
sequence. The other lines will be treated as
ordinary lines in the paragraph.
может быть "переписан" ПАгентами с включением последовательности фиктивных тэгов для :first-line. Эта фиктивная последовательность тэгов поможет продемонстрировать, как наследуются свойства:
<P><P:first-line> This is a somewhat long HTML
paragraph that will </P:first-line> be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</P>

Если псевдоэлемент разрывает реальный элемент, то желаемый эффект может часто быть описан последовательностью фиктивных тэгов, которая закрывает и затем снова открывает элемент. Таким образом, если мы разметим предыдущий параграф с использованием элемента SPAN:

<P><SPAN class="test"> This is a somewhat long HTML
paragraph that will be broken into several
lines.</SPAN> The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</P>
ПА сможет сгенерировать соответствующие начальный и конечный тэги для SPAN при вставке последовательности фиктивных тэгов для :first-line.
<P><P:first-line><SPAN class="test"> This is a
somewhat long HTML
paragraph that will </SPAN></P:first-line><SPAN class="test"> be
broken into several
lines.</SPAN> The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</P>

Псевдоэлемент :first-line может быть присоединён только к элементу уровня блока.

Псевдоэлемент :first-line подобен инлайн-элементу, но с некоторыми ограничениями. К псевдоэлементу :first-line применяются только следующие свойства : свойства шрифта, свойства цвета, свойства фона, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' и 'clear'.

5.12.2 Псевдоэлемент :first-letter

Псевдоэлемент :first-letter можно использовать для "начальных заглавных" и "зависающих заглавных", которые являются распространёнными типографскими эффектами. Этот тип начальных букв похож на инлайн-элемент, если его свойство 'float' - 'none', иначе он похож на всплывающий элемент.

Вот свойства, применимые к псевдоэлементу :first-letter: свойства шрифта, свойства цвета, свойства фона, 'text-decoration', 'vertical-align' (только если 'float' установлен в 'none'), 'text-transform', 'line-height', свойства полей, свойства заполнения, свойства рамок, 'float', 'text-shadow' и 'clear'.

Следующий CSS2 сделает начальную заглавную зависающую букву, захватывающую две строки:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <TITLE>Drop cap initial letter</TITLE>
  <STYLE type="text/css">
   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; font-style: italic;
                    font-weight: bold; float: left }
   SPAN           { text-transform: uppercase }
  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>The first</SPAN> few words of an article
    in The Economist.</P>
 </BODY>
</HTML>

Этот пример может быть сформатирован так:

Image illustrating the combined effect of the :first-letter and :first-line pseudo-elements [D]

Последовательность фиктивных тэгов такова:

<P>
<SPAN>
<P:first-letter>
T
</P:first-letter>he first
</SPAN>
few words of an article in the Economist.
</P>

Обратите внимание, что тэги псевдоэлемента :first-letter примыкают к содержимому (т.е. к начальному символу), поскольку начальный тэг псевдоэлемента :first-line вставлен справа после начального тэга элемента, к которому он присоединён.

Чтобы выполнить форматирование традиционных зависающих заглавных букв, ПА могут выровнять размеры шрифта, например, по базовой линии. Также и контуры глифов могут быть приняты в расчёт при форматировании.

Пунктуация (т.е. символы, определённые в Unicode [UNICODE] в классах пунктуации "open" (Ps), "close" (Pe) и "other" (Po)), которая предшествует первой букве, должна включаться, как в этом примере:

Quotes that precede the first letter should be included. [D]

Псевдоэлемент :first-letter совпадает только с частью элементов уровня блока.

В некоторых языках могут быть специфические правила рассмотрения определённых сочетаний букв. В датском языке, например, если комбинация "ij" появляется в начале слова, обе буквы должны рассматриваться псевдоэлементом :first-letter.

Пример(ы):

Следующий пример иллюстрирует, как может действовать перекрывание псевдоэлементов. Первые буквы каждого элемента P будут зелёными и размером '24pt'. Остаток первой форматированной строки будет 'blue', а остаток параграфа - 'red'.

P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }

<P>Какой-нибудь текст не менее двух строк.</P>

Если предположить, что разрыв строки появится перед словом "не", последовательность фиктивных тэгов для этого фрагмента может быть такой:

<P>
<P:first-line>
<P:first-letter>
К
</P:first-letter>акой-нибудь текст
</P:first-line>
не менее двух строк.
</P>

Заметьте, что элемент :first-letter находится внутри элемента :first-line. Свойства, установленные в :first-line, наследуются в :first-letter, но переопределяются, если то же самое свойство установлено в :first-letter.

5.12.3 Псевдоэлементы :before и :after

Псевдоэлементы ':before' и ':after' можно использовать для вставки генерируемого содержимого до или после содержимого элемента. Они разъясняются в разделе генерируемый текст.

Пример(ы):

H1:before {content: counter(chapno, upper-roman) ". "}

Если псевдоэлементы :first-letter и :first-line сочетаются с :before и :after, то они применяются к первой букве или строке элемента, включая вставленный текст.

Пример(ы):

P.special:before {content: "Special! "}
P.special:first-letter {color: #ffd800}

Это выведет "S" в слове "Special!" золотом.


Синтаксис CSS2 и базовые типы данных

4 Синтаксис CSS2 и базовые типы данных

Содержание

  • 4.1 Синтаксис
    • 4.1.1 Лексический разбор
    • 4.1.2 Ключевые слова
    • 4.1.3 Символы и регистр
    • 4.1.4 Операторы
    • 4.1.5 at-правила (at-rules)
    • 4.1.6 Блоки
    • 4.1.7 Наборы правил, блоки объявлений и селекторы
    • 4.1.8 Объявления и свойства
    • 4.1.9 Комментарии
  • 4.2 Правила обработки ошибок грамматического разбора
  • 4.3 Значения
    • 4.3.1 Целые и вещественные числа
    • 4.3.2 Размеры
    • 4.3.3 Процентные
    • 4.3.4 URL + URN = URI
    • 4.3.5 Счётчики
    • 4.3.6 Цвета
    • 4.3.7 Угловые значения
    • 4.3.8 Время
    • 4.3.9 Частоты
    • 4.3.10 Строки
  • 4.4 Представление документа CSS
    • 4.4.1 Мнемоники символов, не представленных в кодировке

4.1 Синтаксис

В этом разделе описывается грамматика (и правила вперёд-совместимого разбора), общие для любой версии CSS (включая CSS2). Будущие версии CSS будут придерживаться этого ядра синтаксиса, хотя и могут ввести дополнительные синтаксические ограничения.

Эти описания являются нормативными. Они также дополняются нормативными грамматическими правилами в Приложении D.

4.1.1 Лексический разбор

Все уровни CSS - уровень 1, уровень 2 и любые будущие уровни - используют одно ядро синтаксиса. Это позволяет пользовательским агентам (ПА) разбирать (хотя и не полностью понимать) таблицы стилей, написанные в уровнях CSS, ещё не существовавших в момент создания ПА. Дизайнеры могут использовать это свойство для создания таблиц стилей, работающих со старыми ПА, применяя также возможности позднейших уровней CSS.

На лексическом уровне таблицы стилей CSS состоят из последовательности лексем (грамматических единиц). Список лексем CSS2 приведён ниже. Определения используют общепринятые выражения в стиле Lex. Восьмеричные коды относятся к ISO 10646 ([ISO10646]). Как и в Lex, в случае нескольких одновременных совпадений, самое длинное совпадение определяет лексему.

Лексема

Определение

IDENT | {ident}
ATKEYWORD | @{ident}
STRING | {string}
HASH | #{name}
NUMBER | {num}
PERCENTAGE | {num}%
DIMENSION | {num}{ident}
URI url\({w}{string}{w}\)
|url\({w}([!#$%&*-~]|{nonascii}|{escape})*{w}\)
UNICODE-RANGE | U\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})?
CDO <!--
CDC -->
; ;
{ \{
} \}
( \(
) \)
[ \[
] \]
S | [ \t\r\n\f]+
COMMENT \/\*[^*]*\*+([^/][^*]*\*+)*\/
FUNCTION | {ident}\(
INCLUDES ~=
DASHMATCH |=
DELIM | любой другой символ, не совпавший с вышеприведёнными правилами

Вышеприведённые макросы в фигурных скобках ({}) определены так:

Макрос | Определение
ident | {nmstart}{nmchar}*
name | {nmchar}+
nmstart | [a-zA-Z]|{nonascii}|{escape}
nonascii | [^\0-\177]
unicode | \\[0-9a-f]{1,6}[ \n\r\t\f]?
escape | {unicode}|\\[ -~\200-\4177777]
nmchar | [a-z0-9-]|{nonascii}|{escape}
num | [0-9]+|[0-9]*\.[0-9]+
string | {string1}|{string2}
string1 | \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2 | \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'
nl | \n|\r\n|\r|\f
w | [ \t\r\n\f]*

Ниже дан синтаксис ядра CSS. В последующих разделах описывается, как этот синтаксис использовать. Приложение D описывает более ограниченный набор грамматических правил исключительно для уровня 2 языка CSS.

stylesheet  : [ CDO | CDC | S | statement ]*;
statement   : ruleset | at-rule;
at-rule     : ATKEYWORD S* any* [ block | ';' S* ];
block       : '{' S* [ any | block | ATKEYWORD S* | ';' ]* '}' S*;
ruleset     : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*;
selector    : any+;
declaration : property ':' S* value;
property    : IDENT S*;
value       : [ any | block | ATKEYWORD S* ]+;
any         : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING
              | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES
              | FUNCTION | DASHMATCH | '(' any* ')' | '[' any* ']' ] S*;

Лексемы КОММЕНТАРИЕВ в грамматике отсутствуют (для сохранения читабельности), но некоторое количество этих лексем может появляться где-либо среди других лексем.

Лексема S в вышеприведённой грамматике стоит вместо пробела. Только символы "space" (Unicode code 32), "tab" (9), "line feed" (10), "carriage return" (13) и "form feed" (12) могут служить пробелами. Другие "пробелоподобные" символы, такие как "em-space" (8195) и "ideographic space" (12288), никогда не могут быть пробелами.

4.1.2 Ключевые слова

Ключевые слова имеют форму идентификаторов. Ключевые слова обязаны не размещаться между кавычками ("..." или '...'). Таким образом,

red

это ключевое слово, а

"red"
- нет (это строка). Другие неверные примеры:

Примеры неверного использования:

width: "auto";
border: "none";
font-family: "serif";
background: "red";

4.1.3 Символы и регистр

Следующие правила всегда соблюдаются:

  • Все таблицы стилей CSS нечувствительны к регистру, за исключением тех частей, которые не контролируются CSS. Например, чувствительность к регистру значений атрибутов "id" и "class", имён шрифтов и URI в HTML находится вне пределов действия этой спецификации. Особо отметьте, что имена элементов нечувствительны к регистру в HTML, но чувствительны в XML.
  • В CSS2 идентификаторы (включая имена элементов, классы и ID в селекторах) могут содержать только символы [A-Za-z0-9] и символы ISO 10646 от 161 и выше и дефис (-); они не могут начинаться с дефиса или цифры. Они могут также содержать escape-последовательности и любые символы и цифровые коды ISO 10646 (см. далее). Например, идентификатор "B&W?" можно записать как "B\&W\?" или "B\26 W\3F".

    Заметьте, что Unicode это покодовый эквивалент ISO 10646 (см. [UNICODE] и [ISO10646]).

  • В CSS2 символ обратного слэша (\) обозначает три типа символов - escape-последовательностей.

    1. В строке обратный слэш, после которого идёт новая строка, игнорируется (т.е. считается, что строка не содержит ни обратных слэшей, ни переводов строки).

    2. Отменяет значение специальных символов CSS. Любой символ (исключая 16-ричные числа) может войти в escape-последовательность с помощью обратного слэша для отмены своего специального значения. Например, "\"" это строка. состоящая из одной двойной кавычки. Препроцессоры таблиц стилей обязаны не удалять эти слэши из таблиц стилей до тех пор, пока они не изменят значения таблицы стилей.

    3. Escape-последовательности с обратным слэшем позволяют авторам обращаться к символам, которые не могут быть напрямую помещены в документ. В таких случаях используется обратный слэш, после которого идут не более шести 16-ричных цифр (0..9A..F), что соответствует символам ISO 10646 ([ISO10646]) с этим числом. Если после 16-ричного числа идёт цифра или буква, то конец числа должен быть очищен. Есть два способа сделать это:

    1. пробел (или иной символ пробела): "\26 B" ("&B")
    2. предоставление точного 16-ричного числа из шести цифр: "\000026B" ("&B")

    Фактически эти два метода можно комбинировать. Только один символ пробела игнорируется после 16-ричной escape-последовательности. Заметьте, что это означает, что "реальный" пробел после escape-последовательности обязан или сам быть выражен с использованием escape-последовательности, или удвоен.

  • Escape-последовательности с обратным слэшем всегда рассматриваются как часть идентификатора или строки (т.е. "\7B" это не пунктуация, а "{" - она, и "\32" допускается в начале имени класса, а "2" - нет).

4.1.4 Операторы

Таблица стилей любой версии CSS состоит из списка операторов (см. грамматику выше). Есть два вида операторов: at-правила и наборы правил. Вокруг операторов могут быть пробелы.

В данной спецификации выражения "непосредственно перед" или "сразу после" означают отсутствие пробелов или комментариев.

4.1.5 at-правила (at-rules)

At-правила начинаются at-ключевым словом, символом '@', сразу после которого следует идентификатор (например, '@import', '@page').

At-правило состоит из вышеназванного и последующей точки с запятой (;) или блока, в зависимости от того, что идёт первым. ПА CSS, обнаруживающий нераспознаваемое at-правило, обязан игнорировать всё это правило и продолжить разбор после него.

В CSS2 ПА обязан игнорировать любое правило '@import', которое появляется внутри блока или предшествует всем наборам правил.

Пример неверного использования:

Предположим, например, что разборщик CSS2 обрабатывает такую таблицу стилей:

@import "subs.css";
H1 { color: blue }
@import "list.css";

Второе '@import', в соответствии с CSS2, недопустимо. Разборщик CSS2 игнорирует всё at-правило, сокращая таблицу стилей до:

@import "subs.css";
H1 { color: blue }

Пример неверного использования:

Здесь второе правило '@import' - неверное, поскольку появляется внутри блока '@media'.

@import "subs.css";
@media print {
  @import "print-main.css";
  BODY { font-size: 10pt }
}
H1 {color: blue }

4.1.6 Блоки

Блок начинается с левой фигурной скобки ({) и заканчивается парной правой скобкой (}). Между ними могут находиться любые символы, кроме скобок (( )), квадратных скобок ([ ]) и фигурных скобок ({ }), которые обязаны всегда использоваться в паре и могут вкладываться. Одиночные (') и двойные (") кавычки также обязаны использоваться парами, а символы между ними разбираются как строка\string. См. выше определение строки в Лексическом разборе.

Пример неверного использования:

Это пример блока. Обратите внимание, что правая скобка между двойными кавычками не образует пары с открывающей скобкой блока, а вторая одиночная кавычка - это escape-символ, не образующий пары с первой одиночной кавычкой:

{ causta: "}" + ({7} * '\'') }

Заметьте, что это неверное правило CSS2, образующее, тем не менее, блок, как указано выше.

4.1.7 Наборы правил, блоки объявлений и селекторы

Набор правил (называемый также "правило") состоит из селектора с последующим блоком объявлений.

Блок объявлений (называемый также в последующем тексте {}-блоком) начинается с левой фигурной скобки ({) и заканчивается парной правой скобкой (}). Между ними может находиться список из 0 или более разделённых точкой с запятой (;) объявлений.

Селектор (см. также раздел Селекторы) состоит из чего-либо, предшествующего первой скобке (но не включая) ({). Селектор всегда идёт вместе с {}-блоком. Если ПА не может разобрать селектор (т.е. если он неверен в CSS2), он обязан также игнорировать и {}-блок.

В CSS2 запятая (,) имеет специальное значение в селекторах. Однако, поскольку не известно, примет ли запятая иные значения в последующих версиях CSS, весь оператор должен быть проигнорирован, если где-либо в селекторе имеется ошибка, даже если остальная часть селектора выглядит как соответствующая CSS2.

Пример неверного использования:

Например, поскольку "&" это неверная лексема в селекторе CSS2, ПА CSS2 обязан игнорировать всю вторую строку и не устанавливать красный цвет в H3:

H1, H2 {color: green }
H3, H4 & H5 {color: red }
H6 {color: black }

Пример(ы):

Это более сложный пример. Первые две пары фигурных скобок находятся внутри строки и не обозначают конец селектора. Это - верный оператор CSS2.

P[example="public class foo\
{\
    private int x;\
\
    foo(int x) {\
        this.x = x;\
    }\
\
}"] { color: red }

4.1.8 Объявления и свойства

Объявление может быть пустым или состоять из свойства с последующими двоеточием (:) и значением. Вокруг каждого из них могут быть пробелы.

В зависимости от способа работы селектора, несколько объявлений для одного селектора могут быть упорядочены точкой с запятой (;), разделяющей группы.

Пример(ы):

Таким образом, следующие правила:

H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 { line-height: 14pt }
H1 { font-family: Helvetica }
H1 { font-variant: normal }
H1 { font-style: normal }

эквивалентны:

H1 {
  font-weight: bold;
  font-size: 12pt;
  line-height: 14pt;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal
}

Свойства это идентификаторы. Между ними могут находиться любые символы, кроме скобок (( )), квадратных скобок ([ ]) и фигурных скобок ({ }), которые обязаны всегда использоваться в паре, а точка с запятой вне строки обязана вводиться с использованием escape-последовательности. Угловые, квадратные и круглые скобки могут вкладываться. Внутри кавычек символы разбираются как строка.

Синтаксис значений специфицируется отдельно для каждого свойства, но, в любом случае, значения выводятся из идентификаторов, строк, чисел, размеров, процентов, URI, цветов, углов, времени и частот.

ПА обязан игнорировать объявление с неверным названием свойства или неверным значением. Каждое свойство CSS2 имеет свой собственный синтаксис и семантические ограничения для принимаемых значений.

Пример неверного использования:

Предположим, что разборщик CSS2 обрабатывает такую таблицу стилей:

H1 { color: red; font-style: 12pt }  /* Неверное значение: 12pt */
P { color: blue;  font-vendor: any;  /* Неверное свойство: font-vendor */
    font-variant: small-caps }
EM EM { font-style: normal }

Второе объявление в первой строке имеет неверное значение '12pt'. Второе объявление второй строки содержит неопределённое свойство 'font-vendor'. Разборщик CSS2 будет игнорировать эти объявления, уменьшая таблицу до:

H1 { color: red; }
P { color: blue;  font-variant: small-caps }
EM EM { font-style: normal }

4.1.9 Комментарии

Комментарии начинаются символом "/*" и заканчиваются символом "*/". Они могут появляться в любом месте между лексемами, и их содержимое не влияет на представление документа. Комментарии не могут вкладываться.

CSS допускает также SGML-ограничители комментариев ("<!--" и "-->") в определённых местах, но это не комментарии CSS. Они разрешены для ввода правил стиля в документе-источнике HTML (в элементе STYLE), чтобы спрятать эти правила от до-HTML 3.2 ПАгентов. См. спецификацию HTML 4.0 ([HTML40]).

4.2 Правила обработки ошибок грамматического разбора

В некоторых случаях ПА обязан игнорировать часть неверной таблицы стилей. В этой спецификации игнорирует означает, что ПА разбирает неверную часть (чтобы определить её начало и конец), но действует так, как будто её нет.

Для гарантий того, что новые свойства и новые значения для существующих свойств смогут быть добавлены в будущем, от ПА требуется соблюдение следующих правил при обработке следующих сценариев:

  • Неизвестные свойства. ПА обязан игнорировать объявление с неизвестным свойством. Например, если в таблице стилей указано:
    H1 { color: red; rotation: 70minutes }

    ПА будет рассматривать это, как если бы в таблице было:

    H1 { color: red }
  • Неверные значения. ПА обязан игнорировать объявление с неверным значением. Например:
    IMG { float: left }       /* корректно в CSS2 */
IMG { float: left here }  /* "here" это неверное значение для 'float' */
IMG { background: "red" } /* ключевые слова CSS2 не могут вводиться в кавычках */
IMG { border-width: 3 }   /* для размеров должны быть указаны единицы измерения */
    Разборщик CSS2 примет первое правило и проигнорирует остальные, как если бы таблица была такой:
    IMG { float: left }
IMG { }
IMG { }
IMG { }

    ПА, соответствующий будущим спецификациям CSS, может учитывать также одно или более из следующих правил.

  • Неверные at-ключевые слова. ПА обязаны игнорировать неверные ключевые слова at- вместе с тем, что следует после них до (;) включительно или до блока ({...}), в зависимости от того, что идёт первым. Например, рассмотрим:
    @three-dee {
  @background-lighting {
    azimuth: 30deg;
    elevation: 190deg;
  }
  H1 { color: red }
}
H1 { color: blue }

    Правило от- '@three-dee' не входит в CSS2. Следовательно, всё at-правило (до третьей правой фигурной скобки включительно) игнорируется. ПА CSS2 игнорирует его, уменьшая таблицу до:

    H1 { color: blue }

4.3 Значения

4.3.1 Целые и вещественные числа

Значения некоторых типов могут принимать целые (обозначенные <integer>) или реальные числа (обозначенные <number>). Реальные и целые числа специфицируются только в десятеричной нотации. <integer> состоит из одной или более цифр от "0" до "9". <number> может быть <integer> или ноль или более цифр с точкой (.), после которой идут одна или более цифр. И целые, и реальные числа могут иметь впереди "-" или "+" для указания знака числа.

Заметьте, что многие свойства, допускающие целые и реальные числа в качестве значения, на практике ограничивают значение некоторым диапазоном, часто неотрицательным значением.

4.3.2 Размеры

Размеры имеют отношение к горизонтальным и вертикальным измерениям.

Формат значения размера (обозначаемого в этой спецификации <length>) - это необязательный символ знака ('+' или '-', с '+' по умолчанию), после которого сразу идёт <number> (с или без десятичной точки), после которого сразу идёт идентификатор единиц измерения (например, px, deg и т.п.). После размера '0' единицы измерения не обязательны.

Некоторые свойства допускают негативные значения размеров, но это может усложнять модель форматирования и могут иметься ограничения, обусловленные конкретной реализацией. Если негативное значение размера не поддерживается, оно должно быть конвертировано до ближайшего поддерживаемого значения.

Есть два типа единиц измерения: относительные и абсолютные. Относительные размеры специфицируют значение размера относительно какого-либо исходного свойства размера. Таблицы стилей, использующие относительные единицы измерения, легче масштабируются при переносе на различные носители (например, с дисплея компьютера на лазерный принтер).

Относительными единицами измерения являются:

  • em: 'font-size' соответствующего шрифта;
  • ex: 'x-height' соответствующего шрифта;
  • px: пикселы, относительно устройства просмотра.

Пример(ы):

H1 { margin: 0.5em }      /* em */
H1 { margin: 1ex }        /* ex */
P  { font-size: 12px }    /* px */

Единицы измерения 'em' эквивалентны вычисленному значению свойства 'font-size' того элемента, в котором оно используется. Исключением является тот случай, когда 'em' появляется в самом значении свойства 'font-size', тогда оно относится к размеру шрифта родительского элемента. Может использоваться для вертикального или горизонтального измерения. (Эта единица измерения иногда называется quad-width/квад-ширина в типографском тексте.)

Единицы 'ex' определяются 'x-height' шрифта. x-height называется так, потому что она часто равна высоте "x" нижнего регистра. Однако 'ex' определены даже для тех шрифтов, которые не содержат "x".

Пример(ы):

Правило:

H1 { line-height: 1.2em }

означает, что высота строки элементов H1 будет на 20% больше, чем размер шрифта элементов H1. С другой стороны:

H1 { font-size: 1.2em }

означает, что размер шрифта элементов H1 будет на 20% больше, чем размер шрифта, наследуемый из элементов H1.

Если они специфицированы для корня дерева документа (например, "HTML" в HTML), 'em' и 'ex' относятся к начальному значению свойства.

Пикселы относительны к разрешению устройства просмотра, т.е. чаще всего - дисплея компьютера. Если плотность пикселов выводного устройства сильно отличается от плотности типичного компьютерного дисплея, ПА должен перемасштабировать пикселные значения. Рекомендуется, чтобы пиксел в качестве точки отсчёта был визуальным углом одного пиксела на устройстве с плотностью пикселов 90dpi на расстоянии вытянутой руки от читателя. При нормальной длине руки 28 дюймов визуальный угол будет примерно 0.0227 градусов.

При чтении с расстояния вытянутой руки 1px соответствует примерно 0.28 мм (1/90 дюйма). При печати на лазерном принтере, рассчитанном на чтение с несколько меньшего расстояния, чем вытянутая рука, (55 см, 21 дюймов), 1px составляет около 0.21 мм. На принтере с разрешением 300 точек на дюйм (dpi) это можно округлить до 3 точек (0.25 мм); на принтере с 600 dpi это можно округлить до 5 точек.

Два нижеследующих изображения иллюстрируют эффект при просмотре размера пиксела с расстояния и эффект разрешения устройства. На первом рисунке расстояние чтения 71 см (28 дюймов) даёт пиксел 0.28 мм, а с расстояния 3.5 м (12 футов) требуется пиксел 1.4 мм.

Showing that pixels must become larger if the viewing distance increases [D]

На втором рисунке область 1px на 1px закрывается одной точкой устройства с низким разрешением (экран компьютера), и та же самая область покрывается 16-ю точками на устройстве с высоким разрешением (как лазерный принтер 400 dpi).

Showing that more device pixels (dots) are needed to cover a 1px by 1px area on a high-resolution device than on a low-res one [D]

Дочерние элементы не наследуют относительные значения, специфицированные для из родителя; они (обычно) наследуют вычисленные значения.

Пример(ы):

В следующих правилах вычисленное значение 'text-indent' элементов H1 будет 36pt, а не 45pt, если H1 является дочерним относительно элемента BODY:

BODY {
  font-size: 12pt;
  text-indent: 3em;  /* т.е. 36pt */
}
H1 { font-size: 15pt }

Абсолютные единицы измерения используются только тогда, когда известны физические свойства выводного устройства.
Абсолютными значениями являются:

  • in: inches/дюймы -- 1 дюйм равен 2.54 сантиметра.
  • cm: сантиметры
  • mm: миллиметры
  • pt: points/пункты - пункт, используемый в CSS2, равен 1/72 дюйма.
  • pc: picas/пики -- 1 пика равна 12 пунктам.

Пример(ы):

H1 { margin: 0.5in }      /* дюймы  */
H2 { line-height: 3cm }   /* сантиметры */
H3 { word-spacing: 4mm }  /* миллиметры */
H4 { font-size: 12pt }    /* пункты */
H4 { font-size: 1pc }     /* пики */

В тех случаях, когда специфицированные размеры не могут поддерживаться, ПА обязаны давать значение, приближённое к реальному.

4.3.3 Процентные значения

Формат процентного значения (обозначаемого в этой спецификации <percentage>) - это необязательный знак ('+' или '-', с '+' по умолчанию), сразу за которым следует <number>, за которым сразу следует '%'.

Процентные значения всегда относительны к другому значению, например, размеру. Каждое свойство, допускающее процентные значения, определяет также значение, на которое ссылается процентное. Значение может быть взято из другого свойства того же элемента, свойства элемента-предка или значения контекста форматирования (например, ширины содержащего блока). Если процентное значение установлено для свойства корневого элемента и проценты определены как относительные к наследуемому значению какого-либо свойства, то результирующее значение - это начальное значение этого свойства, взятое кратным количеству процентов.

Пример(ы):

Поскольку дочерние элементы (обычно) наследуют вычисленные значения своих родителей, в следующем примере дочерние от P элементы унаследуют значение в 12pt для 'line-height', а не процентное значение (120%):

P { font-size: 10pt }
P { line-height: 120% }  /* 120% от 'font-size' */

4.3.4 URL + URN = URI

URL (Uniform Resource Locator, см. [RFC1738] и [RFC1808]), предоставляет адрес ресурса Web. Ожидается появление нового способа идентификации ресурсов, называемого URN (Uniform Resource Name). Вместе они называются URI (Uniform Resource Identifiers, см. [URI]). В этой спецификации используется термин URI.

Значения URI в этой спецификации обозначаются <uri>. Функциональное обозначение URI в значениях свойств - "url()", как здесь:

Пример(ы):

BODY { background: url("http://www.bg.com/pinkish.gif") }

Формат значения URI таков: 'url(' с последующим необязательным пробелом, с последующей необязательной одинарной кавычкой (') или двойной кавычкой ("), с последующим собственно URI, с последующей необязательной одинарной кавычкой (') или двойной кавычкой ("), с последующим необязательным пробелом с последующей ')'. Знаки кавычек должны быть одинаковыми (двойными или одинарными).

Пример(ы):

Пример без кавычек:

LI { list-style: url(http://www.redballs.com/redball.png) disc }

Скобки, запятые, пробельные символы, одинарные (') и двойные (") кавычки в URI обязаны вводиться с помощью escape-последовательностей с обратным слэшем: '\(', '\)', '\,'.

В зависимости от типа URI, может иметься возможность также записывать вышеуказанные символы как URI-escape-последовательности (где "(" = %28, ")" = %29 и т.д.), как описано в [URI].

Для того, чтобы создать модульные таблицы стилей, не зависящие от абсолютного размещения ресурса, авторы могут использовать относительные URI. Относительные URI (как определено в [RFC1808]) расширяются до полного URI с использованием базового URI. RFC 1808, раздел 3 определяет нормативный алгоритм этого процесса. В таблицах стилей CSS базовый URI это URI таблицы стилей, а не документа-источника.

Пример(ы):

Предположим, имеется такое правило:

BODY { background: url("yellow") }

размещённое в таблице стилей с URI:

http://www.myorg.org/style/basic.css

Фон элемента BODY в документе-источнике будет заполнен каким-нибудь изображением, обозначенный ресурсом URI:

http://www.myorg.org/style/yellow

ПА могут по-разному обрабатывать URI, обозначающие несуществующий или необрабатываемый ресурс

4.3.5 Счётчики

Счётчики обозначаются идентификаторами (см. свойства 'counter-increment' и 'counter-reset'). Чтобы обратиться к значению счётчика, используется обозначение 'counter(<identifier>)' или 'counter(<identifier>, <list-style-type>)'. Стиль по умолчанию - 'decimal'.

Чтобы обратиться к последовательности вложенных счётчиков с одним именем, обозначение будет: 'counters(<identifier>, <string>)' или 'counters(<identifier>, <string>, <list-style-type>)'. См. "Вложенные счётчики и область видимости" в главе о генерируемом содержимом.

В CSS2 к значениям счётчиков можно обратиться только из свойства 'content'. Заметьте, что 'none', это возможный <list-style-type>: 'counter(x, none)' рассматривается как пустая строка.

Пример(ы):

Вот таблица стилей, нумерующая параграфы (P) для каждой главы (H1). Параграфы нумеруются римскими цифрами с последующими точкой и пробелом:

P {counter-increment: par-num}
H1 {counter-reset: par-num}
P:before {content: counter(par-num, upper-roman) ". "}

Счётчики вне области видимости какого-либо 'counter-reset', считаются сброшенными в 0 в 'counter-reset' корневого элемента.

4.3.6 Цвета

<color> это или предопределённое слово, или числовая спецификация RGB.

Список названий цветов: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white и yellow. Эти 16 цветов определены в HTML 4.0 ([HTML40]). Пользователь может дополнительно специфицировать ключевые слова, соответствующие цветам, используемым определёнными объектами в среде пользователя. Дополнительную информацию см. в системных цветах.

Пример(ы):

BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }

Модель цветов RGB используется в числовых спецификациях цвета. Во всех данных примерах специфицируется один и тот же цвет:

Пример(ы):

EM { color: #f00 }              /* #rgb */
EM { color: #ff0000 }           /* #rrggbb */
EM { color: rgb(255,0,0) }      /* диапазон целых чисел 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* диапазон чисел с плавающей точкой 0.0% - 100.0% */

Формат значения RGB в 16-ричной записи - '#' за которым сразу идут три или шесть 16-ричных символов. Трёхсимвольная запись RGB (#rgb) конвертируется в шестисимвольную форму (#rrggbb) путём дублирования цифр, но не дополнением нулями. Например, #fb0 расширяется до #ffbb00. Это гарантирует, что белый (#ffffff) можно специфицировать сокращённой записью (#fff) и удалить зависимость от глубины цвета на дисплее.

Формат значения RGB в функциональной записи - 'rgb(' за которым идёт список разделённых запятыми трёх числовых значений (или трёх целых, или трёх процентных) с последующей ')'. Целое значение 255 соответствует 100% и F или FF в 16-ричной записи: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. Пробельные символы допускаются вокруг числовых значений.

Все цвета RGB специфицированы в цветовом пространстве sRGB (см. [SRGB]). ПА могут различаться в том, насколько точно они представляют эти цвета, но использование sRGB предоставляет недвусмысленное и объективно измеряемое определение того, каким должен быть цвет, соответствующий международным стандартам (см. [COLORIMETRY]).

Соответствующие ПА могут ограничивать свои возможности вывода цвета для выполнения коррекции гаммы цветов. sRGB специфицирует гамму дисплея в 2.2 от специфицированных условий просмотра. ПА должны уточнить цвет, заданный в CSS, так чтобы в сочетании с 'натуральной' гаммой дисплея выводного устройства воспроизводилась эффективная гамма дисплея в 2.2. См. дополнительные детали в разделе коррекция гаммы. Обратите внимание, что воздействие производится только на цвета, специфицированные в CSS; например, от изображений ожидается сопровождающая их собственная цветовая информация.

Значения вне гаммы устройства должны усекаться: значения red, green и blue обязаны измениться, чтобы войти в рамки диапазона, поддерживаемого устройством. Для типичного CRT-монитора, чья гамма устройства - та же самая, что и sRGB, следующие три правила эквивалентны:

Пример(ы):

EM { color: rgb(255,0,0) }       /* диапазон целых 0 - 255 */
EM { color: rgb(300,0,0) }       /* усекается до rgb(255,0,0) */
EM { color: rgb(255,-10,0) }     /* усекается до rgb(255,0,0) */
EM { color: rgb(110%, 0%, 0%) }  /* усекается до rgb(100%,0%,0%) */

Другие устройства, такие как принтеры, имеют гаммы, отличные от sRGB; некоторые цвета вне диапазона 0..255 sRGB будут презентабельными (в пределах гаммы устройства), в то время как другие цвета в пределах диапазона 0..255 sRGB будут вне гаммы устройства и будут, таким образом, усечены.

Примечание. Хотя цвета могут добавить значительное количество информации в документы и сделать их более читабельными, необходимо учитывать, что определённые сочетания цветов могут вызвать проблемы у людей, страдающих нарушениями восприятия цвета. Если Вы используете фоновое изображение или устанавливаете цвет фона, подбирайте, пожалуйста, подходящий цвет переднего плана.

4.3.7 Угловые значения

Угловые значения (обозначаемые в тексте <angle>) используются со звуковыми таблицами стилей.

Их формат - необязательный знак ('+' или '-', с '+' по умолчанию), сразу за которым следует <number>, за которым сразу следует идентификатор единиц измерения углов.

Единицами измерения углов являются:

  • deg: градусы
  • grad: грады
  • rad: радианы

Угловые значения могут быть негативными. Они должны быть нормализованы ПАгентом до диапазона 0-360deg. Например, -10deg и 350deg эквивалентны.

Для примера, правый угол - '90deg' или '100grad', или '1.570796326794897rad'.

4.3.8 Время

Временные значения (обозначаемые в тексте <time>) используются со звуковыми таблицами стилей.

Их формат: <number>, сразу за которым идёт идентификатор единиц измерения времени.

Идентификаторами единиц измерения времени являются:

  • ms: миллисекунды
  • s: секунды

Значения времени не могут быть негативными.

4.3.9 Частоты

Значения частот (обозначаемые в тексте <frequency>) используются со звуковыми каскадными таблицами стилей.

Их формат: <number>, сразу за которым идёт идентификатор единиц измерения частоты.

Идентификаторами единиц измерения частоты являются:

  • Hz: герцы
  • kHz: килогерцы

Значения частоты не могут быть негативными.

Например, 200Hz (или 200hz) - это басовый звук, а 6kHz (или 6khz) - средний регистр.

4.3.10 Строки

Строки могут записываться в двойных или одинарных кавычках. Двойные кавычки не могут появляться внутри двойных кавычек, если только они не вводятся с помощью escape-последовательности ( '\"' или '\22'). Аналогично для одинарной кавычки ("\'" или "\27").

Пример(ы):

"this is a 'string'"
"this is a \"string\""
'this is a "string"'
'this is a \'string\''

Строка не может непосредственно содержать переход на новую строку. Чтобы вставить переход на новую строку, используйте escape-последовательность "\A" (16-ричная A - это символ прогона строки в Unicode, но в CSS представляет общее обозначение для "новой строки"). См., например, свойство 'content'.

Можно разбивать строки на несколько строк, по эстетическим и другим соображениям, но в таком случае новая строка сама escape'ируется обратным слэшем (\). Например, следующие два селектора совершенно одинаковы:

Пример(ы):

A[TITLE="a not s\
o very long title"] {/*...*/}
A[TITLE="a not so very long title"] {/*...*/}

4.4 Представление документа CSS

Таблица стилей CSS это последовательность символов из Universal Character Set/Универсального Набора Символов (см. [ISO10646]). Для передачи и хранения эти символы обязаны кодироваться в кодировке символов, поддерживающей набор символов, доступных в US-ASCII (например, ISO 8859-x, SHIFT JIS и т.д.). Чтобы хорошенько разобраться в наборах символов и кодировке, см. спецификацию HTML 4.0 ([HTML40], главу 5). См. также спецификацию XML 1.0 ([XML10], разделы 2.2 и 4.3.3, и Приложение F.

Если таблица стилей встроена в другой документ, например, элемент STYLE или атрибут "style" в HTML, таблица стилей разделяет использование кодировки символов с этим документов.

Если таблица стилей находится в отдельном файле, ПА обязаны учитывать следующий приоритет при определении кодировки символов документа (от высшего приоритета к низшему):

  1. Параметр HTTP "charset" в поле "Content-Type".
  2. At-правило @charset.
  3. Механизмы языка обращающегося документа (например, в HTML атрибут "charset" элемента LINK).

Не более одного правила @charset может появляться во внешней таблице стилей - оно обязано не появляться во внедрённой таблице стилей - и оно должно появляться в самом начале документа, до появления любых символов. После "@charset" авторы специфицируют имя кодировки символов. Имя обязано быть названием набора символов, как описано в регистре IANA (см. [IANA]. См. также в [CHARSETS] полный список наборов символов). Например:

Пример(ы):

@charset "ISO-8859-1";

В данной спецификации не определено, какие кодировки символов ПА обязан поддерживать.

Обратите внимание, что опора на конструкцию @charset теоретически создаёт проблему, поскольку отсутствует a priori информация о том, как она кодирована. На практике, однако, широко используемые кодировки в Internet базируются или на ASCII, UTF-16, UCS-4, или (редко) на EBCDIC. В общем, это означает, что значения начальных байтов документа дают ПАгенту возможность определить семейство кодировки, что даёт достаточно информации для декодирования правила @charset, которое, в свою очередь, определяет точную кодировку.

4.4.1 Мнемоники символов, не представленных в кодировке символов

Таблице стилей может понадобиться обратиться к символам, которые невозможно представить в текущей кодировке символов. Эти символы обязаны быть записаны как escape'ированные ссылки на символы ISO 10646. Эти мнемоники служат для тех же целей, что и числовые ссылки в документах HTML или XML (см. [HTML40], главы 5 и 25).

Escape-механизм символов должен использоваться только тогда, когда необходимо вывести таким способом только несколько символов. Если большая часть документа требует этого, авторы должны кодировать документ в более подходящей кодировке (например, если документ содержит много греческих символов, автор может использовать "ISO-8859-7" или "UTF-8").

Процессоры-посредники, использующие другие кодировки символов, могут транслировать эти escape-последовательности в последовательности байтов кодировки. Процессоры-посредники не обязаны, с другой стороны, изменять escape-последовательности, отменяющие специальные значения символов ASCII.

Соответствующие ПА обязаны корректно отображать в Unicode все символы любой кодировки, которые они могут распознать (или они обязаны вести себя так, как будто они это делают).

Например, документ, передаваемый как ISO-8859-1 (Latin-1), не может содержать напрямую греческую букву: "κουρος" (по-гречески: "kouros"), которая должна быть записана как "\3BA\3BF\3C5\3C1\3BF\3C2".

Примечание. В HTML 4.0 числовые мнемоники интерпретируются в значениях атрибута "style", но не в содержимом элемента STYLE. Из-за этой асимметрии мы рекомендуем, чтобы авторы использовали escape-механизм CSS вместо числовых мнемоник и для атрибута "style", и для элемента STYLE. Например, мы рекомендуем:

<SPAN style="voice-family: D\FC rst">...</SPAN>

вместо:

<SPAN style="voice-family: D&#252;rst">...</SPAN>


Полное описание таблицы расходов на путешествие

На диаграмме показано визуальное представление таблицы, специально размеченной для звукового представления.

Над таблицей размещён центрированный заголовок "Travel Expense Report".

Таблица показывает расходы по трём категориям (meals, hotels и transport) в двух городах (San Jose и Seattle) на четыре даты (25-28 августа 1997).
Чтобы сгруппировать удобно информацию, в таблице сделана центральная группа из трёх столбцов, обозначенных "Meals", "Hotels" и "Transport", слева направо. Первый столбец таблицы (слева от центральной группы) перечисляет дни путешествия и отмечает города, которые были посещены в эти дни. В последнем столбце таблицы (справа от центральной группы столбцов) ячейки содержат информацию о сумме затрат на каждый день.

Первый ряд данных начинается датой "25-Aug-97". столбца затрат показывают $37.74 (meals), $112 (hotel) и $45 (transport). В последнем столбце итога нет.

Второй ряд данных начинается датой "26-Aug-97". Три столбца затрат показывают $27.28 (meals), $112 (hotel) и $45 (transport). В последнем столбце итога нет.

Лэйбл "San Jose" в первом столбце, полужирным шрифтом, показывает, что путешественник находился в San Jose в течение первых двух дней.

Третий ряд данных показывает предварительные итоги по San Jose по каждой категории: $65.02 (meals), $224 (hotels), $90 (transport) и складывает их в последнем столбце: $379.02. Третий ряд выделен серым фоном.

Следующие три ряда представляют такую же информацию на последующие два дня в Seattle.

В последнем ряду выведен итог по каждой категории (meals, hotels и transport) и, в нижней правой ячейке таблицы, общий итог затрат за 4 дня: $800.27


Полное описание примера вывода структурно перекрывающихся ячеек

Этот пример демонстрирует разницу между табличной моделью CSS для HTML и для документов других форматов.
Первый пример, HTML, неверно определён в HTML, так как приведёт к перекрыванию ячеек, если следовать правилам вывода HTML. Правила CSS применяются к другим форматам, отличным от HTML, и здесь нет никаких проблем.

На диаграмме показано, как эти два почти идентичных примера - HTML и не-HTML - могут быть отображены.
Представление примера HTML не определено, и здесь показан один из возможных вариантов представления - в левой половине рисунка: в нём две перекрывающиеся ячейки.
Представление примера не-HTML - справа - он следует правилам CSS и не имеет перекрывающихся ячеек.

В обеих таблицах ячейки имеют серый фон и чёрную рамку. Каждая имеет цифру в качестве лэйбла. Ячейки отделены друг от друга на определённое расстояние (межячеечное пространство/spacing).

Верхний ряд первой таблицы состоит из 4 ячеек, содержащих, соответственно, цифры "1", "2", "3" и "4". Вторая из этих ячеек, с цифрой "2", растянута на нижележащий ряд.
Второй ряд таблицы содержит одну ячейку - с цифрой "5", которая (ячейка) захватывает первый и второй столбцы. Таким образом, ячейка "2" и ячейка "5" перекрываются во втором ряду, втором столбце. Перекрывание отмечено более тёмным серым цветом.

В правой таблице имеется такой же верхний ряд из 4 ячеек, обозначенных "1", "2", "3" и "4". Вторая ячейка также захватывает первый и второй ряды. Второй ряд таблицы содержит одну ячейку - с цифрой "5", которая (ячейка) захватывает третий и четвёртый столбцы. Таким образом, никакого перекрывания ячеек здесь нет, но первая ячейка второго ряда - пуста.


Таблицы

17 Таблицы

Содержание

  • 17.1 Введение
  • 17.2 Табличная модель CSS
    • 17.2.1 Анонимные объекты таблицы
  • 17.3 Селекторы столбцов
  • 17.4 Таблицы в модели визуального форматирования
    • 17.4.1 Позиция и выравнивание заголовка
  • 17.5 Вид содержимого таблицы
    • 17.5.1 Слои и прозрачность таблицы
    • 17.5.2 Алгоритмы ширины таблицы: свойство 'table-layout'
      • Фиксированный вывод таблицы
      • Автоматический вывод таблицы
    • 17.5.3 Алгоритмы высоты таблицы
    • 17.5.4 Горизонтальное выравнивание в столбце
    • 17.5.5 Динамические эффекты рядов и столбцов
  • 17.6 Рамки
    • 17.6.1 Модель раздельных рамок
      • Обрамление пустых ячеек: свойство 'empty-cells'
    • 17.6.2 Модель сжимающихся рамок
      • Разрешение конфликтов рамок
    • 17.6.3 Стили рамок
  • 17.7 Звуковое представление таблиц
    • 17.7.1 Говорящие заголовки: свойство 'speak-header'

17.1 Введение

Таблицы представляют взаимоотношения между данными. Авторы специфицируют эти взаимоотношения на языке документа и их представление в CSS двумя способами - визуально и звуком.

Авторы могут специфицировать визуальное форматирование таблицы как прямоугольной сетки ячеек. Ряды и столбцы ячеек можно организовать в группы рядов и столбцов. Ряды, столбцы, группы рядов, группы столбцов и ячейки могут иметь вокруг себя порисованные рамки (в CSS2 есть две модели рамок). Авторы могут выровнять данные в ячейках по вертикали и по горизонтали и выровнять данные во всех ячейках ряда или столбца.

Авторы могут также специфицировать звуковое представление таблицы: то, как заголовки и данные будут звучать. На языке документа авторы могут помечать лэйблами ячейки и группы ячеек так, что при звуковом отображении заголовки ячеек будут произноситься перед данными ячеек. Фактически это "сериализует" таблицу: пользователи, прослушивающие таблицу, услышат последовательность заголовков и последующих данных.

Пример(ы):

Вот простая таблица из трёх рядов и трёх столбцов, написанная в HTML 4.0:

<TABLE>
<CAPTION>Это простая таблица 3x3</CAPTION>
<TR id="row1">
   <TH>Header 1      <TD>Cell 1        <TD>Cell 2
<TR id="row2">
   <TH>Header 2      <TD>Cell 3        <TD>Cell 4
<TR id="row3">
   <TH>Header 3      <TD>Cell 5        <TD>Cell 6
</TABLE>

Этот код создаёт одну таблицу (элемент TABLE), три ряда (элементы TR), три заголовочных ячейки (элементы TH) и шесть ячеек данных (элементы TD). Обратите внимание, что три столбца в этом примере специфицированы неявно: в таблице столько столбцов, сколько затребовано заголовочными ячейками и ячейками данных.

Следующее правило CSS центрирует текст по горизонтали в заголовочных ячейках и выводит данные шрифтом, имеющим вес bold:

TH { text-align: center; font-weight: bold }

Следующее правило выравнивает текст заголовочных ячеек по их базовой линии и центрирует текст по вертикали в каждой ячейке данных:

TH { vertical-align: baseline }
TD { vertical-align: middle }

Следующие правила специфицируют, что верхний ряд будет окружён сплошной голубой рамкой толщиной 3px и каждый из других рядов будет окружён сплошной чёрной рамкой толщиной 1px:

TABLE   { border-collapse: collapse }
TR#row1 { border-top: 3px solid blue }
TR#row2 { border-top: 1px solid black }
TR#row3 { border-top: 1px solid black }

Заметьте, однако, что рамки вокруг рядов перекрываются там, где ряды смыкаются. Какого цвета (чёрного или голубого) и толщины (1px или 3px) будет рамка между рядами row1 и row2? Мы обсудим это в разделе о разрешении конфликтов рамок.

Следующее правило помещает заголовок таблицы над таблицей:

CAPTION { caption-side: top }

Наконец, следующее правило специфицирует, что при звуковом выводе каждый ряд данных произносится как "Заголовок, Данные, Данные":

TH { speak-header: once }

Например, первый ряд будет произнесён "Заголовок1 Ячейка1 Ячейка2".
С другой стороны, со следующим правилом:

TH { speak-header: always }

будет звучать "Заголовок1 Ячейка1 Заголовок1 Ячейка2".

Этот пример показал, как CSS работает с элементами HTML 4.0; в HTML 4.0 семантика различных элементов таблицы (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH и TD) основательно проработана.
В других языка документов (таких как приложения XML) может не быть предопределённых элементов таблицы. Поэтому CSS2 позволяет авторам "map/отображать" элементы языка документа в элементы таблицы через свойство 'display'. Например, следующее правило заставляет элемент FOO работать как элемент TABLE в HTML, а элемент BAR - как элемент CAPTION:

FOO { display : table }
BAR { display : table-caption }

Мы обсудим различные элементы таблицы в следующем разделе. В данной спецификации термин элемент таблицы относится к любому элементу, участвующему в создании таблицы. "Внутренний" элемент таблицы это тот, который производит ряд, группу рядов, столбец, группу столбцов или ячейку.

17.2 Табличная модель CSS

Табличная модель CSS базируется на табличной модели HTML 4.0, структура таблиц которой почти параллельна визуальному представлению. В данной модели таблица состоит из необязательного заголовка и любого числа рядов столбцов. О табличной модели говорится, что в ней "ряды первичны", поскольку авторы явно специфицируют ряды, а не столбцы, в языке документа. Столбцы определяются после того, как будут специфицированы все ряды - первая ячейка каждого ряда принадлежит первому столбцу, вторая - второму столбцу и т.д.). Ряды и столбцы могут быть сгруппированы структурно, и это группирование отражается при представлении (например, рамка может быть прорисована вокруг группы рядов).

Таким образом, табличная модель состоит из таблиц, заголовков, рядов, групп рядов, столбцов, групп столбцов и ячеек.

Модель CSS не требует, чтобы язык документа содержал элементы, соответствующие каждому из этих компонентов. Для языков документов (таких как приложения XML), не имеющих предопределённых табличных элементов, авторы обязаны отображать элементы языка документа в элементы таблицы; это делается с помощью свойства 'display'. Следующие значения 'display' назначают семантику таблицы произвольному элементу:

table (в HTML: TABLE)
Специфицирует, что элемент определяет таблицу уровня блока: это прямоугольный блок, участвующий в контексте форматирования блока.
inline-table (в HTML: TABLE)
Специфицирует, что элемент определяет таблицу инлайн-уровня: это прямоугольный блок, участвующий в инлайн-контексте форматирования).
table-row (в HTML: TR)
Специфицирует, что элемент - это ряд ячеек.
table-row-group (в HTML: TBODY)
Специфицирует, что элемент группирует один или более рядов.
table-header-group (в HTML: THEAD)
Похож на 'table-row-group', но для визуального форматирования; группа рядов всегда отображается до всех других рядов и групп рядов и после любого верхнего заголовка. Печатающие пользовательские агенты (ПА) могут повторять ряды футера на каждой странице, занимаемой таблицей.
table-footer-group (в HTML: TFOOT)
Похож на 'table-row-group', но для визуального форматирования; группа рядов всегда отображается после всех других рядов и групп рядов и перед любым нижним заголовком. Печатающие ПА могут повторять ряды футера на каждой странице, занимаемой таблицей.
table-column (в HTML: COL)
Специфицирует, что элемент описывает столбец ячеек.
table-column-group (в HTML: COLGROUP)
Специфицирует, что элемент группирует один или более столбцов.
table-cell (в HTML: TD, TH)
Специфицирует, что элемент представляет ячейку таблицы.
table-caption (в HTML: CAPTION)
Специфицирует заголовок таблицы.

Элементы с 'display' , установленным в 'table-column' или 'table-column-group', не выводятся (в точности так, как если бы они имели 'display: none'), но используются, поскольку могут иметь атрибуты, вводящие определённый стиль для представляемых ими столбцов.

Таблица стилей по умолчанию для HTML 4.0 в приложении иллюстрирует использование этих значений в HTML 4.0:

TABLE    { display: table }
TR       { display: table-row }
THEAD    { display: table-header-group }
TBODY    { display: table-row-group }
TFOOT    { display: table-footer-group }
COL      { display: table-column }
COLGROUP { display: table-column-group }
TD, TH   { display: table-cell }
CAPTION  { display: table-caption }

ПА могут игнорировать эти значения свойства 'display' для документов HTML, поскольку авторы не должны изменять ожидаемое поведение элемента.

17.2.1 Анонимные объекты таблицы

Языки документов, кроме HTML, могут не иметь всех элементов табличной модели CSS2. В таких случаях "отсутствующие" элементы обязаны учитываться, для того чтобы табличная модель работала. Отсутствующие элементы генерируют анонимные объекты (например, анонимные боксы при визуальном выводе таблицы) в соответствии со следующими правилами:

  1. Любой элемент таблицы автоматически будет генерировать вокруг себя необходимые объекты таблицы, состоящие не менее чем из трёх вложенных объектов, соответствующих элементу 'table'/'inline-table', элементу 'table-row' и элементу 'table-cell'.
  2. Если родительский P в 'table-cell' элемента T - не 'table-row', объект, соответствующий 'table-row', будет генерироваться между P и T. Этот объект будет занимать все последовательные родственные (смежные) 'table-cell' (в дереве документа) в T.
  3. Если родительский P в 'table-row' элемента T - не элемент 'table', 'inline-table' или 'table-row-group', объект, соответствующий элементу 'table', будет генерироваться между P и T. Этот объект будет занимать всех последовательных родственников (смежных) (в дереве документа) в T, требующем 'table'-родителя: 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group' и 'caption'.
  4. Если родительский P в 'table-row-group' (или 'table-header-group', или 'table-footer-group') элемента T - не 'table' или 'inline-table', объект, соответствующий элементу 'table', будет генерироваться между P и T. Этот объект будет занимать всех последовательных родственников (смежных) (в дереве документа) в T, требующем 'table'-родителя: 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group', и 'caption'.
  5. Если дочерний T от 'table-row' элемента P - не элемент 'table-cell', объект, соответствующий элементу 'table-cell', будет генерироваться между P и T. Этот объект будет занимать всех последовательных родственников T, не являющихся элементами 'table-cell'.

Пример(ы):

В этом примере XML принимается, что элемент 'table' содержит элемент HBOX:

<HBOX>
  <VBOX>George</VBOX>
  <VBOX>4287</VBOX>
  <VBOX>1998</VBOX>
</HBOX>

поскольку ассоциированная таблица стилей:

HBOX { display: table-row }
VBOX { display: table-cell }

Пример(ы):

В этом примере три элемента 'table-cell' содержат текст в ROWs/рядах. Заметьте, что текст далее инкапсулируется в анонимные инлайн-боксы, как разъясняется в модели визуального форматирования:

<STACK>
  <ROW>This is the <D>top</D> row.</ROW>
  <ROW>This is the <D>middle</D> row.</ROW>
  <ROW>This is the <D>bottom</D> row.</ROW>
</STACK>

Таблица стилей:

STACK { display: inline-table }
ROW   { display: table-row }
D     { display: inline; font-weight: bolder }

От ПА HTML не требуется создавать анонимные объекты в соответствии с вышеприведёнными правилами.

17.3 Селекторы столбцов

Ячейки таблиц могут принадлежать к двум контекстам: рядам и столбцам. Однако в документе-источнике ячейки являются потомками рядов и никогда - столбцов. Несмотря на это, некоторые аспекты ячеек могут вводиться установкой свойств столбцов.

Следующие свойства применяются к элементам столбцов и групп столбцов:

'border'
Различные свойства рамки применяются к столбцам только тогда, когда 'border-collapse' в элементе таблицы установлен в 'collapse'. В таком случае, рамки, установленные для столбца и группы столбцов, являются источником алгоритма разрешения конфликтов, который выбирает стили рамки для каждого края ячейки.
'background'
Свойства фона устанавливают фон для ячеек в столбце, но только если и ячейка, и ряд имеют прозрачный фон. См. Слои и прозрачность таблицы.
'width'
Свойство 'width' задаёт минимальную ширину столбца.
'visibility'
Если 'visibility' столбца установлено в 'collapse', ни одна из ячеек столбца не отображается, и ячейки, захватывающие другие столбцы, усекаются. В дополнение к этому, ширина таблицы уменьшается до ширины столбца, содержащегося в ней. См. ниже Динамические эффекты. Другие значения 'visibility' не оказывают никакого действия.

Пример(ы):

Вот примеры некоторых правил таблиц стилей, устанавливающих свойства столбцов.
Первые два правила вместе выполняют атрибут "rules" HTML 4.0 со значением "cols". Третье правило делает столбец "totals" голубым, а последние два правила показывают, как установить для столбца фиксированный размер, используя фиксированный алгоритм вывода.

COL   { border-style: none solid }
TABLE { border-style: hidden }
COL.totals { background: blue }
TABLE { table-layout: fixed }
COL.totals { width: 5em }

17.4 Таблицы в модели визуального форматирования

В терминах модели визуального форматирования поведение таблицы может быть похожим на элемент уровня блока или замещаемый элемент инлайн-уровня. У таблиц есть содержимое, заполнение, рамки и поля.

В обоих случаях элемент таблицы генерирует анонимный бокс, содержащий сам бокс таблицы и бокс заголовка (если имеется). Боксы таблицы и заголовка имеют каждый свои собственные области содержимого, заполнения, полей, рамки; и размеры прямоугольного анонимного бокса являются наименьшими возможными для вмещения обоих боксов.
Вертикальные поля сжимаются в тех местах, где боксы таблицы и заголовка соприкасаются. При любом перемещении таблицы нужно перемещать весь анонимный бокс, а не просто бокс таблицы, поскольку вместе с ним перемещается и заголовок таблицы.

A table with a caption above it; both have margins and the margins between them are collapsed, as is normal for vertical margins. [D]

Диаграмма таблицы с заголовком вверху; нижнее поле заголовка сжато вместе с верхним полем таблицы.

17.4.1 Позиция и выравнивание заголовка

'caption-side'
Значение:top | bottom | left | right | inherit
Начальное:top
Применяется: к элементам 'table-caption'
Наследуется:да
Процентное:N/A
Носитель:визуальный

Это свойство специфицирует позицию бокса заголовка относительно бокса таблицы.
Значения имеют следующий смысл:

top
Позиционирует бокс заголовка над боксом таблицы.
bottom
Позиционирует бокс заголовка под боксом таблицы.
left
Позиционирует бокс заголовка слева от бокса таблицы.
right
Позиционирует бокс заголовка справа от бокса таблицы.

Заголовки сверху или снизу от элемента 'table' форматируются совершенно так же, как если бы они были элементами блока до и после таблицы, за исключением того, что (1) они наследуют наследуемые свойства таблицы и (2) они не рассматриваются как бокс блока для целей элементов 'compact' или 'run-in', которые могут предшествовать таблице.

Заголовок сверху или снизу от бокса таблицы ведёт себя подобно боксу блока и при расчётах ширины; ширина вычисляется относительно ширины бокса таблицы содержащего блока.

Для заголовков слева или справа от бокса таблицы значение, отличное от 'auto' для 'width' , устанавливает ширину явно, но 'auto' сообщает ПА, что нужно выбрать "приемлемую ширину". Она может варьироваться от "самого узкого возможного бокса" до "строки", поэтому мы рекомендуем, чтобы пользователи не специфицировали 'auto' для ширины левых и правых заголовков.

Чтобы выровнять содержимое заголовка по горизонтали внутри бокса заголовка, используйте свойство 'text-align'.
Для вертикального выравнивания левых и правых боксов заголовка относительно бокса таблицы используйте свойство 'vertical-align'. В этом случае возможны только значения 'top', 'middle' и 'bottom'. Все другие значения рассматриваются как 'top'.

Пример(ы):

Здесь свойство 'caption-side' размещает заголовок под таблицей. Заголовок будет той же ширины, что и родитель таблицы, и текст заголовка будет выровнен по левому краю.

CAPTION { caption-side: bottom;
          width: auto;
          text-align: left }

Пример(ы):

В этом примере показано, как разместить заголовок в левом поле. Сама таблица центрирована установкой левого и правого полей в 'auto', а весь бокс с таблицей и заголовком сдвинут в левое поле на ту же величину, что и ширина заголовка.

BODY {
    margin-left: 8em
}
TABLE {
    margin-left: auto;
    margin-right: auto
}
CAPTION {
    caption-side: left;
    margin-left: -8em;
    width: 8em;
    text-align: right;
    vertical-align: bottom
}

Принимая, что ширина таблицы меньше доступной ширины, форматирование будет примерно таким:

A centered table with a caption in the left margin of the page [D]

Диаграмма показывает центрированную таблицу с заголовком, растянутую в левое поле как результат негативного значения свойства 'margin-left'.

17.5 Вид содержимого таблицы

Подобно другим элементам языка таблицы, внутренние элементы таблицы генерируют прямоугольные боксы с содержимым, заполнением и рамками. Однако они не имеют полей.

Визуальное представление этих боксов управляется прямоугольной нерегулярной сеткой из рядов и столбцов. Каждый бокс занимает целое число ячеек сетки, определяемое в соответствии с нижеследующими правилами. Эти правила не применяются к HTML 4.0 или более ранним версиям HTML; HTML имеет свои собственные ограничения на охват рядов и столбцов.

  1. Каждый бокс ряда занимает один ряд ячеек сетки. Все вместе боксы рядов заполняют таблицу сверху вниз в том порядке, в котором они появляются в документе-источнике (т.е. таблица занимает ровно столько рядов сетки, сколько имеется элементов рядов).
  2. Группа рядов занимает те же ячейки, что и составляющие её ряды.
  3. Бокс столбца занимает один или более столбцов сетки. Боксы столбцов размещаются друг за другом в том порядке, в котором они вводятся. Бокс первого столбца может находиться слева или справа, в зависимости от значения свойства 'direction' таблицы.
  4. Бокс группы столбцов занимает те же ячейки сетки, что и содержащиеся в нём столбцы.
  5. Ячейки могут захватывать несколько рядов и столбцов. (Хотя CSS2 не определяет, как вычисляется количество захваченных рядов или столбцов, ПА может иметь специальные сведения о документе-источнике; будущая версия CSS может предоставить способ выражения этих сведений в синтаксисе CSS.) Каждая ячейка, следовательно, это прямоугольный бокс шириной и высотой в одну или более ячеек сетки. Верхний ряд этого прямоугольника находится в ряду, специфицированном родителем ячейки. Прямоугольник обязан находиться как можно левее, но не может перекрывать любой другой бокс ячейки и обязан находиться справа от всех ячеек в том же ряду, определённых ранее в документе-источнике. (Это ограничение остаётся в силе, если свойство 'direction' таблицы - 'ltr'; если же 'direction' - 'rtl', "лево" и "право" в предыдущем предложении меняются местами.)
  6. Бокс ячейки не может продолжаться за пределы бокса последнего ряда или группы рядов таблицы; ПА обязан уменьшить его (бокс ячейки) до вмещения.

Примечание. Ячейки таблицы могут быть позиционированы относительно или абсолютно, но это не рекомендуется: позиционирование и всплывание удаляет бокс из прорисовки, влияя на выравнивание таблицы.

Вот два примера. Первый - документ HTML:

<TABLE>
<TR><TD>1 <TD rowspan="2">2 <TD>3 <TD>4
<TR><TD colspan="2">5
</TABLE>

<TABLE>
<ROW><CELL>1 <CELL rowspan="2">2 <CELL>3 <CELL>4
<ROW><CELL colspan="2">5
</TABLE>

Вторая таблица сформатирована, как на правом рисунке. Однако представление таблицы HTML явно не определено HTML, и CSS не пытается определить его. ПА свободны в том, как отобразить её, например, как на левом рисунке.

One table with overlapping cells and one without [D]

Слева - возможное представление ошибочной таблицы HTML 4.0; справа - единственно возможное форматирование такой же не-HTML таблицы.

17.5.1 Слои и прозрачность таблицы

Для того, чтобы найти фон для каждой ячейки таблицы, различные элементы таблицы можно представить себе как состоящие из шести накладывающихся слоёв. Фон, установленный в элементе, это один из слоёв, который будет виден, только если слои над ним имеют прозрачный фон.

schema of table layers [D]

Схема слоёв таблицы.

  1. Самый нижний слой - цельный, представляющий весь бокс таблицы. Подобно другим боксам, он может быть прозрачным.

  2. Следующий слой содержит группы столбцов. Группы столбцов - такой же высоты, как и таблица, но они не должны перекрывать всю таблицу по горизонтали.

  3. Сверху над группами столбцов находятся области, представляющие боксы столбцов. Как и группы столбцов, столбцы - такой же высоты, как и таблица, но они не должны перекрывать всю таблицу по горизонтали.

  4. Следом идёт слой групп рядов. Каждая группа рядов - такой же ширины, как таблица. Все вместе группы рядов полностью перекрывают таблицу сверху вниз.

  5. Предпоследний слой содержит ряды. Ряды также покрывают всю таблицу.

  6. Самый верхний слой содержит ячейки. Как показано на рисунке, хотя все ряды имеют одинаковое количество ячеек, не каждая ячейка может иметь специфицированное содержимое. Эти "пустые" ячейки прозрачны, что позволят нижележащим слоям просвечивать.

В следующем примере первый ряд содержит 4 ячейки, но второй ряд не содержит ячеек, и, таким образом, виден фон таблицы, исключая те места, где ячейка первого ряда захватывает и этот ряд. Следующий код HTML и правила стилей -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <STYLE type="text/css">
      TABLE { background: #ff0; border-collapse: collapse }
      TD    { background: red; border: double black }
    </STYLE>
  </HEAD>
  <BODY>
    <P>
    <TABLE>
      <TR>
        <TD> 1
        <TD rowspan="2"> 2
        <TD> 3
        <TD> 4
      </TR>
      <TR><TD></TD></TR>
    </TABLE>
  </BODY>
</HTML>

может быть сформатирован так:

Table with three empty cells in bottom row [D]

Таблица с тремя пустыми ячейками в нижнем ряду.

17.5.2 Алгоритмы ширины таблицы: свойство 'table-layout'

CSS не определяет "оптимальный" вид таблицы, поскольку во многих случаях это дело вкуса. CSS не определяет ограничения того, как ПА обязан выводить таблицу. ПА могут использовать любой возможный алгоритм и свободны предпочесть скорость точности отображения, если только не выбран "алгоритм фиксированного вывода ".

'table-layout'
Значение:auto | fixed | inherit
Начальное:auto
Применяется: к элементам 'table' и 'inline-table'
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Свойство 'table-layout' контролирует алгоритм, используемый для вывода ячеек, рядов и столбцов таблицы.
Значения имеют следующий смысл:

fixed
Алгоритм фиксированного вывода таблицы;
auto
Используется любой автоматический алгоритм вывода таблицы.

Эти два алгоритма описаны ниже.

Алгоритм фиксированного вывода

В этом (быстром) алгоритме горизонтальный вывод таблицы не зависит от содержимого ячеек; он зависит только от ширины таблицы, ширины столбцов и от рамок и заполнения ячеек.

Ширина таблицы может быть специфицирована явно свойством 'width'. Значение 'auto' (и для 'display: table', и для 'display: inline-table') означает использование алгоритма автоматического вывода таблицы.

В алгоритме фиксированного вывода ширина каждого столбца определяется так:

  1. Элемент столбца со значением свойства 'width' , отличным от 'auto', устанавливает ширину этого столбца.
  2. Иначе, ячейка в первом ряду со значением свойства 'width' , отличным от 'auto', устанавливает ширину этого столбца. Если ячейка занимает более одного столбца, ширина разделяется на эти столбцы.
  3. Любые оставшиеся столбцы равномерно разделяют оставшееся горизонтальное пространство таблицы (минус рамки и заполнение ячеек).

Ширина таблицы будет тогда больше значения свойства 'width' для элемента таблицы и суммарной ширины столбцов (плюс заполнение ячеек или рамки). Если таблица шире, чем столбцы, оставшееся пространство должно быть равномерно распределено между столбцами.

При таком методе ПА может начать вывод таблицы сразу, как только будет получен весь первый ряд. Ячейки в последующих рядах не влияют на ширину таблицы. Любая ячейка, имеющая переполняющее содержимое, использует свойство 'overflow' для определения того, сжимать ли переполняющее содержимое.

Автоматический вывод таблицы

В этом алгоритме (требующем обычно не более двух шагов), ширина таблицы определяется шириной её столбцов (и промежуточных рамок). Этот алгоритм отражает поведение некоторых популярных ПА HTML на момент написания данной спецификации. От ПА не требуется выполнять этот алгоритм для определения структуры таблицы в случае, если 'table-layout' - 'auto'. Они могут использовать любой другой алгоритм.

Этого алгоритма может оказаться недостаточно, поскольку он требует, чтобы ПА имел доступ ко всему содержимому таблицы до определения окончательной структуры, и может потребовать более одного шага.

Ширина столбцов определяется так:

  1. Вычисляется минимальная ширина содержимого (MCW) каждой ячейки: форматированное содержимое может занимать любое количество строк, но не может переполнять бокс ячейки. Если специфицированная 'width' (W) ячейки больше, чем MCW, W является минимальной шириной ячейки. Значение 'auto' указывает, что MCW это минимальная ширина ячейки.

    Так же вычисляется "максимальная" ширина каждой ячейки: затем содержимое форматируется без разрывов строк, за исключением тех разрывов строк, которые указаны явно.

  2. Для каждого столбца определяется максимальная и минимальная ширина столбца из тех ячеек, которые занимают только этот столбец. Минимум - это та ширина, которая требуется для ячейки с самой большой минимальной шириной (или 'width' столбца, в зависимости от того, что больше). Максимум - это максимальная ширина, которая требуется для ячейки с самой большой максимальной шириной (или 'width' столбца, в зависимости от того, что больше).
  3. Для каждой ячейки, занимающей более одного столбца, увеличивается минимальная ширина тех столбцов, которые она захватывает, так что вместе они не уже, чем ячейка. То же самое делается и для максимальной ширины. Если возможно, расширяются все захваченные ряды на приблизительно то же значение.

Это задаёт максимальную и минимальную ширину каждого столбца. Ширина столбцов влияет на окончательную ширину таблицы так:

  1. Если свойство 'width' элементов 'table' или 'inline-table' имеет специфицированное значение (W), отличное от 'auto', вычисленное значение свойства будет больше W и минимальной ширины, требующейся для всех столбцов плюс заполнение и рамки ячеек (MIN). Если W больше, чем MIN, излишняя ширина должна быть распределена между столбцами.
  2. Если элементы 'table' или 'inline-table' имеют 'width: auto', вычисленная ширина таблицы будет больше ширины самого большого из содержащих блоков таблицы и MIN. Однако, если максимальная ширина, требуемая для столбцов плюс заполнение ячеек или рамки (MAX) меньше, чем ширина содержащего блока, используется MAX.

Процентные значения ширины столбца являются относительными к ширине таблицы. Если таблица имеет 'width: auto', проценты дают ограничение ширины столбца, которое ПА должен попытаться выдержать. (Очевидно, это не всегда возможно: если ширина столбца '110%', ограничение не может быть выполнено.)

Примечание. В этом алгоритме ряды (и группы рядов) и столбцы (и группы столбцов) ограничивают и сами ограничены размерами содержащихся в них ячеек. Установка ширины столбца может неявно влиять на высоту ряда, и наоборот.

17.5.3 Алгоритмы высоты таблицы

Высота таблицы задаётся свойством 'height' элемента 'table' или 'inline-table'. Значение 'auto' устанавливает, что высота является суммой высоты рядов плюс заполнение ячеек или рамки. Любые другие значения специфицируют высоту явно; таблица, таким образом, может быть выше или короче, чем высота её рядов. CSS2 не специфицирует вывод в тех случаях, когда специфицированная высота таблицы отличается от высоты содержимого, особенно когда высота содержимого может перекрыть специфицированную высоту; или как излишнее пространство должно распределиться между рядами для заполнения высоты таблицы; или, если высота содержимого превосходит специфицированную высоту таблицы, должен ли ПА предоставить механизм прокрутки.

Примечание. Будущие версии CSS могут специфицировать это.

Высота бокса элемента 'table-row' вычисляется однократно сразу после получения ПАгентом всех ячеек ряда: это максимальная специфицированная рядом 'height' и минимальная высота (MIN), затребованная ячейками. Значение 'height' - 'auto' для 'table-row' означает, что вычисленная высота ряда - MIN. MIN зависит от высоты боксов ячеек и выравнивания бокса ячейки (очень походит на вычисление высоты строчного бокса). CSS2 не определяет, к чему относятся процентные значения 'height' , специфицированные для рядов и групп рядов таблицы.

В CSS2 высота бокса ячейки - это максимальное из свойств 'height' ячеек таблицы и минимальная высота, требуемая содержимым (MIN). Значение 'auto' для 'height' подразумевает вычисленное значение MIN. CSS2 не определяет, к чему относятся процентные значения 'height' , когда они определены для ячеек таблицы.

CSS2 не специфицирует, как ячейки, захватывающие более одного ряда, влияют на вычисление высоты рядов, за исключением того, что суммарная высота рядов обязана быть достаточно большой, чтобы окружить ячейку, захватывающую ряды.

Свойство 'vertical-align' каждой ячейки таблицы определяет её выравнивание в ряду. Содержимое каждой ячейки имеет baseline/базовую линию, top/верх, middle/середину и bottom/низ, как и сам ряд.
В контексте таблиц значения 'vertical-align' имеют следующий смысл:

baseline
Базовая линия ячейки помещена на той же высоте, что и базовая линия первого из рядов, которые она захватывает (см. ниже определение базовой линии ячейки и ряда).
top
Верх бокса ячейки выровнен с верхом первого из рядов, которые она захватывает.
bottom
Низ бокса ячейки выровнен с низом последнего из рядов, которые она захватывает.
middle
Центр ячейки выровнен с центром рядов, которые она захватывает.
sub, super, text-top, text-bottom
Эти значения не применяются к ячейкам; вместо этого ячейка выравнивается по базовой линии.

Базовая линия ячейки это базовая линия первого строчного бокса в ячейке. Если никакого текста нет, базовая линия - это базовая линия какого-либо объекта, отображаемого в ячейке или, если такого объекта нет, - низ бокса ячейки. Максимальное расстояние между верхом бокса ячейки и базовой линией всех ячеек, имеющих 'vertical-align: baseline', используется для установки базовой линии ряда. Вот пример:

Example of vertically aligning the cells [D]

Диаграмма показывает действие различных значений 'vertical-align' в ячейках таблицы.

Боксы ячеек 1 и 2 выровнены по их базовым линиям. Бокс ячейки 2 имеет бóльшую высоту относительно базовой линии и поэтому определяет базовую линию ряда. Заметьте, что если нет ни одного бокса ячейки, выровненного по базовой линии, у ряда не будет (не нужна) базовой линии.

Чтобы исключить неоднозначные ситуации, выравнивание ячеек происходит в следующем порядке:

  1. Сначала позиционируются ячейки, выровненные по их базовым линиям. Это устанавливает базовую линию ряда. Затем позиционируются ячейки с 'vertical-align: top'.
  2. Ряд имеет теперь верх, возможно - базовую линию и предварительную высоту, которая является расстоянием от верха (таблицы) до низа самой нижней ячейки. (См. ниже условия для заполнения ячеек.)
  3. Если какая-либо из оставшихся ячеек, выровненных по низу или по середине, имеет высоту большую, чем текущая высота ряда, то высота ряда будет увеличена до максимума этой ячейки путём опускания низа (таблицы).
  4. Наконец, позиционируются оставшиеся ячейки.

Боксы ячеек, которые меньше, чем высота ряда, получают дополнительное заполнение вверху или внизу.

17.5.4 Горизонтальное выравнивание в столбце

Горизонтальное выравнивание содержимого ячейки в боксе ячейки специфицируется свойством 'text-align'.

Если значение свойства 'text-align' для более чем одной ячейки в столбце установлено в<string>, содержимое этих ячеек выравнивается вдоль вертикальной оси. Начало строки касается этой оси. Направление письма определяет, расположена строка слева или справа от оси.

Выравнивание текста таким способом возможно только тогда, когда текст входит на одну строку. Результат не определён, если содержимое ячейки занимает более одной строки.

Если значение 'text-align' ячейки таблицы это строка, но строка не появляется в содержимом ячейки, то конец содержимого ячейки соприкасается с вертикальной осью выравнивания.

Заметьте, что строки не должны быть теми же самыми для каждой ячейки, хотя, как правило, это и так.

CSS не предоставляет способа специфицировать смещение оси вертикального выравнивания относительно края бокса столбца.

Пример(ы):

Следующая таблица стилей:

   TD { text-align: "." }
   TD:before { content: "$" }

создаст столбец знаков доллара в следующей таблице HTML:

  <TABLE>
  <COL width="40">
  <TR> <TH>Long distance calls
  <TR> <TD> 1.30
  <TR> <TD> 2.50
  <TR> <TD> 10.80
  <TR> <TD> 111.01
  <TR> <TD> 85.
  <TR> <TD> 90
  <TR> <TD> .05
  <TR> <TD> .06
  </TABLE>

для выравнивания десятичной точки. Шутки ради, мы использовали псевдоэлемент :before для того, чтобы вставить знак доллара перед каждым значением. Таблица может выглядеть так:

Long distance calls
              $1.30
              $2.50
             $10.80
            $111.01
             $85.
             $90
               $.05
               $.06

17.5.5 Динамические эффекты рядов и столбцов

Свойство 'visibility' принимает значение 'collapse' для элементов ряда, группы рядов, столбца и группы столбцов. Это значение вызывает удаление целого ряда или столбца с экрана, и пространство, нормально занимаемое этим рядом или столбцом, становится доступным для другого содержимого. Подавление ряда или столбца не влияет, однако, на структуру таблицы. Это позволяет динамически удалять столбцы или ряды таблицы без форсирования реструктурирования таблицы для того, чтобы учесть возможные изменения в столбцах.

17.6 Рамки

Имеются две различные модели установки рамок ячейки таблицы в CSS. Одна больше подходит для так называемых раздельных рамок вокруг отдельных ячеек, другая подходит для рамок, которые протянулись от одного конца таблицы до другого. Многие стили рамок могут получены с помощью такой модели, поэтому чаще всего - дело вкуса, какую модель использовать.

'border-collapse'
Значение:collapse | separate | inherit
Начальное:collapse
Применяется: к элементам 'table' и 'inline-table'
Наследуется:да
Процентное:N/A
Носитель:визуальный

Это свойство выбирает модель рамки таблицы. Значение 'separate' выбирает модель раздельных рамок. Значение 'collapse' выбирает модель сжимающихся рамок. Эти модели описаны ниже.

17.6.1 Модель раздельных рамок

'border-spacing'
Значение:<length> <length>? | inherit
Начальное:0
Применяется: к элементам 'table' и 'inline-table'
Наследуется:да
Процентное:N/A
Носитель:визуальный

Размеры специфицируют расстояние, разделяющее рамки смежных таблиц. Если специфицирован один размер, он задаёт и горизонтальное, и вертикальное расстояние. Если специфицированы два, то первый задаёт расстояние по горизонтали, второй - по вертикали. Значения размеров не могут быть отрицательными.

В этой модели каждая ячейка имеет собственную рамку. Свойство 'border-spacing' специфицирует расстояние между рамками смежных ячеек. Это пространство заполняется фоном элемента таблицы. Ряды, группы рядов, столбцы и группы столбцов не могут иметь рамок (т.е. ПА обязаны игнорировать свойства рамки в таких элементах).

Пример(ы):

Таблица на рисунке может быть результатом такой таблицы стилей:

  TABLE      { border: outset 10pt;
               border-collapse: separate;
               border-spacing: 15pt }
  TD         { border: inset 5pt }
  TD.special { border: inset 10pt }  /* Верхняя левая ячейка */

A table with border-spacing [D]

Таблица с 'border-spacing', установленным в значение размера. Заметьте, что у каждой ячейки имеется своя собственная рамка, а таблица также имеет отдельную рамку.

Обрамление пустых ячеек: свойство 'empty-cells'

'empty-cells'
Значение:show | hide | inherit
Начальное:show
Применяется: к элементам 'table-cell'
Наследуется:да
Процентное:N/A
Носитель:визуальный

В модели раздельных рамок данное свойство управляет представлением рамок вокруг ячеек, не имеющих видимого содержимого. Пустые ячейки и ячейки со свойством 'visibility' , установленным в 'hidden', рассматриваются как не имеющие видимого содержимого. Видимое содержимое включает "&nbsp;" и другие пробелы, за исключением ASCII-символов CR ("\0D"), LF ("\0A"), tab ("\09"), и space ("\20").

Если это свойство имеет значение 'show', рамки прорисовываются вокруг пустых ячеек (как вокруг нормальных ячеек).

Значение 'hide' указывает, что рамки вокруг пустых ячеек не будут прорисованы. Следовательно, если все ячейки в ряду имеют значение 'hide' и не имеют видимого содержимого, весь ряд ведёт себя так, как если бы он имел 'display: none'.

Пример(ы):

Следующее правило вызывает прорисовку рамок вокруг всех ячеек:

TABLE { empty-cells: show }

17.6.2 Модель сжимающихся рамок

В модели сжимающихся рамок имеется возможность специфицировать рамки, окружающие все или часть ячеек, рядов, групп рядов, столбцов и групп столбцов. Рамки для атрибута HTML "rule" могут быть специфицированы таким способом.

Рамки центрируются по линиям сетки между ячейками. ПА обязаны находить подходящее правило для округления при наличии нестандартного числа абстрактных единиц измерения (пикселов экрана, точек принтера).

Диаграмма внизу показывает, как взаимодействуют ширина таблицы, рамок, заполнение и ширина ячеек. Их отношения задаются следующим уравнением, которое действует для каждого ряда таблицы:

row-width = (0.5 * border-width0) + padding-left1 + width1 + padding-right1 + border-width1 + padding-left2 +...+ padding-rightn + (0.5 * border-widthn)

Здесь n это число ячеек в ряду, а border-widthi относится к рамке между ячейками i и i + 1. Учтите только, что лишь половина из двух внешних рамок учитывается в ширине таблицы; другая половина этих двух рамок находится в области полей.

Schema showing the widths of cells and borders and the padding of cells [D]

Схема показывает размеры ширины ячеек и рамок и заполнение ячеек.

Обратите внимание, что в этой модели ширина таблицы включает половину ширины рамки таблицы. Также в этой модели таблица не имеет заполнения (но имеет поля).

Разрешение конфликтов рамок

В модели сжимающихся рамок, рамки каждого края каждой ячейки могут быть специфицированы свойствами рамки различных элементов, находящихся у этого края (ячеек, рядов, групп рядов, столбцов, групп столбцов и самой таблицы), и эти рамки могут различаться по ширине, стилю и цвету. Основным правилом является то, что у каждого края выбирается самая "примечательная" рамка, за исключением тех случаев, когда появление стиля 'hidden' безусловно отключает вывод рамки.

Следующие правила определяют, какой стиль рамки "побеждает" в случае конфликта:

  1. Рамки с 'border-style' - 'hidden' имеют преимущество перед всеми другими конфликтующими рамками. Любая рамка с этим значением подавляет все рамки в этом месте.
  2. Рамки со стилем 'none' имеют самый низкий приоритет. Только если свойства рамки всех элементов, встречающихся у данного края, - 'none', тогда рамка будет отсутствовать (но заметьте, что 'none' - это значение по умолчанию для стиля рамки).
  3. Если ни один из стилей не 'hidden' и минимум один из них - не 'none', тогда узкие рамки отбрасываются в пользу более широких. Если несколько рамок имеют одну 'border-width' , тогда стили имеют приоритет в следующем порядке: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove' и, самый низший, 'inset'.
  4. Если стили рамок отличаются только цветом, тогда стиль, установленный в ячейке имеет преимущество перед стилем ряда, который имеет преимущество перед стилем группы рядов, столбца, группы столбцов и, наконец, таблицы.

Пример(ы):

Следующий пример иллюстрирует приложение с такими правилами приоритета. Данная таблица стилей:

  TABLE          { border-collapse: collapse;
                   border: 5px solid yellow; }
  *#col1         { border: 3px solid black; }
  TD             { border: 1px solid red; padding: 1em; }
  TD.solid-blue  { border: 5px dashed blue; }
  TD.solid-green { border: 5px solid green; }

с этим HTML:

<P>
<TABLE>
<COL id="col1"><COL id="col2"><COL id="col3">
<TR id="row1">
    <TD> 1
    <TD> 2
    <TD> 3
</TR>
<TR id="row2">
    <TD> 4
    <TD class="solid-blue"> 5
    <TD class="solid-green"> 6
</TR>
<TR id="row3">
    <TD> 7
    <TD> 8
    <TD> 9
</TR>
<TR id="row4">
    <TD> 10
    <TD> 11
    <TD> 12
</TR>
<TR id="row5">
    <TD> 13
    <TD> 14
    <TD> 15
</TR>
</TABLE>

даст в результате что-либо подобное:

An example of a table with collapsed borders [D]

Пример таблицы со сжимающимися рамками.

Пример(ы):

В следующем примере показана таблица с горизонтальными линиями между рядами. Верх рамки таблицы установлен в 'hidden', чтобы подавить верхний край рамки первого ряда. Это - выполнение атрибута "rules" HTML 4.0 (rules="rows").

TABLE[rules=rows] TR { border-top: solid }
TABLE[rules=rows]    { border-collapse: collapse;
                       border-top: hidden }

Table with horizontal rules [D]

Таблица с горизонтальными линиями между рядами.

В этом случае того же эффекта можно достичь без установки рамки 'hidden' в TABLE: путём адресации первого ряда отдельно. Какой метод предпочесть - дело вкуса.

TR:first-child { border-top: none }
TR { border-top: solid }

Пример(ы):

Вот другой пример скрытых сжимающихся рамок:

Table with two omitted borders [D]

Таблица с двумя пропущенными внутренними рамками.

HTML-источник:

<TABLE style="border-collapse: collapse; border: solid;">
<TR><TD style="border-right: hidden; border-bottom: hidden">foo</TD>
    <TD style="border: solid">bar</TD></TR>
<TR><TD style="border: none">foo</TD>
    <TD style="border: solid">bar</TD></TR>
</TABLE>

17.6.3 Стили рамок

Некоторые значения 'border-style' имеют в таблице иной смысл в сравнении с другими элементами. В следующем списке они помечены звёздочкой.

none
Нет рамки.
*hidden
То же, что 'none', но в модели сжимающихся рамок также сдерживает любые другие рамки (см. раздел Конфликты рамок).
dotted
Рамка из точек .
dashed
Пунктир.
solid
Сплошная линия.
double
Двойная сплошная линия. Сумма двух линий и пространства между ними равна значению 'border-width'.
groove
Вырезана в канве.
ridge
Противоположно 'groove': выступает над канвой.
*inset
В модели раздельных рамок рамка выглядит как целый бокс, как будто он внедрён в канву. В модели сжимающихся рамок - то же, что 'groove'.
*outset
В модели раздельных рамок рамка выглядит как целый бокс, как будто он выступает из канвы. В модели сжимающихся рамок - то же, что 'ridge'.

17.7 Звуковое представление таблиц

Когда таблица читается синтезатором речи, отношения между ячейками данных и заголовочными ячейками обязаны быть выражены иначе, чем отношения вертикального и горизонтального выравнивания. Некоторые синтезаторы речи могут позволять пользователям "перемещаться" в 2-мерном пространстве, давая таким образом возможность отображения пространственных соотношений. Если это невозможно, таблица стилей обязана специфицировать, с какого места произносятся заголовки.

17.7.1 Говорящие заголовки: свойство 'speak-header'

'speak-header'
Значение:once | always | inherit
Начальное:once
Применяется: к элементам. имеющим информацию "шапки" таблицы
Наследуется:да
Процентное:N/A
Носитель:звуковой

Это свойство специфицирует, произносятся ли заголовки перед каждой ячейкой (данных), или только перед той ячейкой, которая ассоциирована с другим заголовком.
Значения имеют следующий смысл:

once
Заголовок произносится однократно перед серией ячеек.
always
Заголовок произносится перед каждой подходящей ячейкой.

Каждый язык документов может иметь различные механизмы спецификации заголовков. Например, в HTML 4.0 ([HTML40]) можно специфицировать заголовочную информацию тремя различными атрибутами ("headers", "scope" и "axis"), и спецификация предоставляет алгоритм для определения заголовочной информации, когда эти атрибуты не специфицированы.

Image of a table created in MS Word [D]

Изображение таблицы с заголовочными ячейками ("San Jose" и "Seattle"), которые не находятся в одном столбце или ряде с данными, к которым они относятся.

Этот пример HTML представляет денежный расчёт расходов на питание, гостиницу и транспорт в двух местах (San Jose и Seattle) на несколько дней. Концептуально Вы можете представлять таблицу в терминах n-размерного пространства. Заголовками этого пространства являются: место, день, категория и итог. Некоторые ячейки определяют метки вдоль оси, а другие дают подсчёт денег в точке данного пространства. Вот разметка для этой таблицы:

<TABLE>
<CAPTION>Travel Expense Report</CAPTION>
<TR>
  <TH></TH>
  <TH>Meals</TH>
  <TH>Hotels</TH>
  <TH>Transport</TH>
  <TH>subtotal</TH>
</TR>
<TR>
  <TH id="san-jose" axis="san-jose">San Jose</TH>
</TR>
<TR>
  <TH headers="san-jose">25-Aug-97</TH>
  <TD>37.74</TD>
  <TD>112.00</TD>
  <TD>45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="san-jose">26-Aug-97</TH>
  <TD>27.28</TD>
  <TD>112.00</TD>
  <TD>45.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="san-jose">subtotal</TH>
  <TD>65.02</TD>
  <TD>224.00</TD>
  <TD>90.00</TD>
  <TD>379.02</TD>
</TR>
<TR>
  <TH id="seattle" axis="seattle">Seattle</TH>
</TR>
<TR>
  <TH headers="seattle">27-Aug-97</TH>
  <TD>96.25</TD>
  <TD>109.00</TD>
  <TD>36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="seattle">28-Aug-97</TH>
  <TD>35.00</TD>
  <TD>109.00</TD>
  <TD>36.00</TD>
  <TD></TD>
</TR>
<TR>
  <TH headers="seattle">subtotal</TH>
  <TD>131.25</TD>
  <TD>218.00</TD>
  <TD>72.00</TD>
  <TD>421.25</TD>
</TR>
<TR>
  <TH>Totals</TH>
  <TD>196.27</TD>
  <TD>442.00</TD>
  <TD>162.00</TD>
  <TD>800.27</TD>
</TR>
</TABLE>

Представляя модель данных таким образом, авторы дают возможность браузерам с синтезом речи работать с таблицей различными способами, например, каждая ячейка может проговариваться как список с повторением соответствующих заголовков перед каждой ячейкой данных:

  San Jose, 25-Aug-97, Meals:  37.74
  San Jose, 25-Aug-97, Hotels:  112.00
  San Jose, 25-Aug-97, Transport:  45.00
 ...

Браузер может также проговаривать ячейки, только если они изменяются:

San Jose, 25-Aug-97, Meals: 37.74
    Hotels: 112.00
    Transport: 45.00
  26-Aug-97, Meals: 27.28
    Hotels: 112.00
...


Полное описание примера приоритетов модели сжимающихся рамок

Диаграмма показывает пример рамок, которые должны быть отображены в модели сжимающихся рамок, где рамки различных стилей, ширины или цвета перекрываются.

На рисунке - таблица в три столбца и пять рядов ячеек, обозначенных от 1 до 15.

Таблица имеет сплошную жёлтую рамку в 5px.
Первый столбец имеет сплошную чёрную рамку в 3px, и левый край рамки столбца скрыт левым краем таблицы.
Пятая ячейка (второй ряд, второй столбец) имеет пунктирную голубую рамку в 5px, которая скрывает сегмент чёрной рамки столбца в том месте, где рамки перекрываются.
Шестая ячейка (второй ряд, третий столбец) имеет сплошную зелёную рамку толщиной 5px, которая скрывает правый край рамки пятой ячейки там, где они (рамки) перекрываются, и правый край рамки таблицы в месте перекрытия.


Полное описание примера вычисления фона

Диаграмма показывает маленькую таблицу с тремя прозрачными ячейками и то, как определяется окончательный цвет фона.

Таблица состоит из двух рядов. Четвёртая ячейка расположена в первом ряду, а вторая ячейка захватывает первый и второй ряды.
Первая, третья и четвёртая ячейки во втором ряду - "пустые".

Каждая не-пустая ячейка имеет красный фон и двойную чёрную рамку.
Каждая пустая ячейка имеет цвет фона таблицы (специфицированный как #ff0) как свой собственный.


Полное описание примера расчёта фона ячеек

На диаграмме показаны шесть накладывающихся "слоёв" табличной модели CSS. Они иллюстрируют алгоритм расчёта окончательного фона ячеек.

Шесть слоёв размечены как прямоугольники, обозначающие приоритет, расположенные один над другим в трёхмерном пространстве (т.е. слои изображены в виде ромбов, чтобы дать представление о 3-мерном пространстве).
Прямоугольники (ромбы) представляют, сверху вниз: ячейки, ряды, группы рядов, столбцы, группы столбцов и саму таблицу.

На диаграмме видно, что, если смотреть сверху вниз на слои, то можно высчитать цвет фона каждой ячейки. На верхнем слое каждая ячейка, специфицирующая слой, показана как серый бокс с чёрной рамкой. Ячейка без чёрного фона в верхнем слое обозначает "окно" в нижележащие слои, которые определяют конечный цвет.
Это же правило действует для всех последующих слоёв: ряд без фона - окно в слой группы рядов и т.д.


Полное описание примера рядов, разделённых горизонтальными линиями рамки

Диаграмма показывает, как правила приоритета могут использоваться для получения рядов, разделённых линиями рамки. Отсутствуют линии сверху и снизу таблицы и вообще нет вертикальных линий.

Изображена таблица из трёх столбцов и трёх рядов. Каждая ячейка обозначена целым числом. Верхний ряд отделён от второго сплошной линией (рамки). Второй ряд также отделён от третьего сплошной линией.


Полное описание примера модели раздельных рамок

Диаграмма демонстрирует действие значения 'separate' для свойства 'border-collapse'.

Изображена таблица из трёх столбцов и двух рядов, ячейки которой являются субъектами модели раздельных рамок.
Ячейки имеют фон серого цвета и стиль рамки - 'inset', что создаёт эффект вдавленности ячеек. Ячейки отделены друг от друга со всех сторон серым пространством шириной 15pt.

Таблица имеет рамку 10pt 'outset', что создаёт эффект выпуклости таблицы.

Полный эффект состоит в отображении "фонаря" с тремя панелями в двух рядах.


Полное описание примера, иллюстрирующего модель сжимающихся рамок

Диаграмма иллюстрирует эффект применения свойства 'collapse' для свойства 'border-collapse'.

Изображен ряд из трёх ячеек и сетка линий, их разделяющих. Левые и правые области содержимого, заполнения, рамки и полей каждой ячейки обозначены повёрнутым текстом над каждой областью. Каждая (красная, точками) линия сетки делит пополам рамку между двумя ячейками.

Ширина таблицы обозначена внизу ячеек как захватывающая справа и слева все области содержимого, заполнения, рамок и полей ячеек, за исключением ячеек, касающихся краёв таблицы. В этих случаях только половина ширины внешней рамки учитывается в ширине таблицы.


Текст

16 Текст

Содержание

  • 16.1 Отступы: свойство 'text-indent'
  • 16.2 Выравнивание: свойство 'text-align'
  • 16.3 Декоративные эффекты
    • 16.3.1 Подчёркивание, надчёркивание, перечёркивание и мигание: свойство 'text-decoration'
    • 16.3.2 Оттенение текста: свойство 'text-shadow'
  • 16.4 Расстояния между буквами и словами: свойства 'letter-spacing' и 'word-spacing'
  • 16.5 Капитализация: свойство 'text-transform'
  • 16.6 Пробел: свойство 'white-space'

Свойства, определённые в следующих разделах, влияют на визуальное представление символов, пробелов, слов и параграфов.

16.1 Отступы: свойство 'text-indent'

'text-indent'
Значение:<length> | <percentage> | inherit
Начальное:0
Применяется: к элементам уровня блока
Наследуется:да
Процентное:относительно ширины содержащего блока
Носитель:визуальный

Это свойство специфицирует отступ первой строки текста в блоке. Точнее, оно специфицирует отступ первого бокса, всплывающего в первый строчный бокс блока. Бокс получает отступ относительно левого (или правого, для вывода справа-налево) края строчного бокса. Пользовательские агенты (ПА) должны отображать этот отступ как пробел.

Значения имеют следующий смысл:

<length>
Отступ имеет фиксированный размер.
<percentage>
Процент от ширины содержащего блока.

Значение 'text-indent' может быть отрицательным, но могут быть ограничения, зависящие от реализации.

Пример(ы):

Отступ размером '3em' для текста.

  P { text-indent: 3em }

16.2 Выравнивание: свойство 'text-align'

'text-align'
Значение:left | right | center | justify | <string> | inherit
Начальное:зависит от ПА и направления письма
Применяется: к элементам уровня блока
Наследуется:да
Процентное:N/A
Носитель:визуальный

Это свойство описывает, как выравнивается инлайн-содержимое блока.
Значения имеют следующий смысл:

left, right, center, and justify
Выравнивает текст влево, вправо, по центру и по формату.
<string>
Специфицирует строку, в которой ячейки столбца таблицы будут выровнены (см. детали и пример в разделе Горизонтальное выравнивание в столбце). Это значение применяется только к ячейкам таблицы. Если установлено в другом элементе, оно рассматривается как 'left' или 'right', в зависимости от того, каково направление письма: 'direction' - 'ltr' или 'rtl', соответственно.

Блок текста это стопка строчных боксов. В случаях 'left', 'right' и 'center', это свойство специфицирует, как инлайн-боксы в каждом строчном боксе выравниваются относительно левой и правой сторон строчного бокса; выравнивание не производится относительно порта просмотра. В случае с 'justify', ПА может сжать инлайн-боксы в дополнение к уточнению их позиций. (См. также 'letter-spacing' и 'word-spacing'.)

Пример(ы):

Здесь обратите внимание, что, поскольку 'text-align' наследуется, все элементы уровня блока внутри элемента DIV с 'class=center' получат своё инлайн-содержимое сцентрированным.

DIV.center { text-align: center }

Примечание. Фактический алгоритм выравнивания по формату зависит от ПА и языка письма.

Соответствующие пользовательские агенты (ПА) могут интерпретировать значение 'justify' как 'left' или 'right', в зависимости от того, каково по умолчанию направление письма: слева-направо или справа-налево, соответственно.

16.3 Декоративные эффекты

16.3.1 Подчёркивание, надчёркивание, перечёркивание и мигание: свойство 'text-decoration'

'text-decoration'
Значение:none | [ underline || overline || line-through || blink ] | inherit
Начальное:none
Применяется: ко всем элементам
Наследуется:нет (см. текст)
Процентное:N/A
Носитель:визуальный

Это свойство описывает декоративное оформление текста элемента. Если это свойство специфицировано для элемента уровня блока, оно воздействует на всех потомков инлайн-уровня данного элемента. Если оно специфицировано (или влияет на) элемент инлайн-уровня, оно воздействует на все боксы, генерируемые элементом. Если элемент не имеет содержимого или текста (например, элемент IMG в HTML), ПА обязаны игнорировать данное свойство.

Значения имеют следующий смысл:

none
Не производит декоративное оформление.
underline
Каждая строка текста подчёркнута.
overline
Каждая строка текста имеет над собой линию.
line-through
Каждая строка текста имеет посередине перечёркивающую линию.
blink
Текст мигает. От соответствующих ПА не требуется поддерживать это значение.

Цвет(а), необходимый для декорирования текста, должен быть получен из значения свойства 'color'.

Это свойство не наследуется, но боксы - потомки бокса блока должны быть сформатированы с тем же оформлением (например, все должны быть с подчёркиванием). Цвет оформления должен остаться тем же самым, даже если элементы-потомки имеют другие значения 'color'.

Пример(ы):

В следующем примере для HTML, текстовое содержимое всех элементов A будет подчёркнуто:

A[href] { text-decoration: underline }

16.3.2 Оттенение текста: свойство 'text-shadow'

'text-shadow'
Значение:none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit
Начальное:none
Применяется: ко всем элементам
Наследуется:нет (см. текст)
Процентное:N/A
Носитель:визуальный

Это свойство принимает список разделённых запятыми эффектов оттенения, применяемых к тексту элемента. Эффекты оттенения применяются в том порядке, в котором они специфицированы, и могут, таким образом, перекрываться один другим, но они никогда не перекрывают сам текст. Эффекты оттенения не изменяют размеры бокса, но могут выходить за его пределы. Уровень стэка эффекта оттенения - тот же самый, что и самого элемента.

Каждый эффект оттенения обязан специфицировать смещение оттенения и может по выбору специфицировать радиус рассеяния и цвет тени.

Смещение оттенения специфицируется двумя значениями <length>, указывающими расстояние от текста. Первое значение специфицирует расстояние по горизонтали справа от текста. Отрицательное значение по горизонтали помещает тень слева от текста. Второе значение специфицирует вертикальное расстояние под текстом. Отрицательное значение по вертикали помещает тень сверху от текста.

Радиус рассеяния может быть по выбору специфицирован после смещения оттенения. Радиус рассеяния это значение, обозначающее границы эффекта рассеяния. Точный алгоритм вычисления эффекта рассеяния не специфицирован.

Значение цвета может быть по выбору специфицировано до или после значений length эффекта оттенения. Значение цвета будет использоваться как базис эффекта оттенения. Если цвет не специфицирован, вместо него будет использоваться значение свойства 'color'.

Оттенения текста могут использоваться вместе с псевдоэлементами :first-letter и :first-line.

Пример(ы):

Следующий пример установит тень справа и снизу от текста элемента. Поскольку цвет не специфицирован, тень будет того же цвета, что и сам элемент, и, поскольку радиус рассеяния не специфицирован, тень текста не будет рассеиваться:

H1 { text-shadow: 0.2em 0.2em }

Следующий пример установит тень справа и снизу от текста элемента. Тень будет иметь радиус рассеяния 5px и красный цвет:

H2 { text-shadow: 3px 3px 5px red }

Следующий пример специфицирует список эффектов оттенения. Первая тень будет справа и снизу от текста элемента и будет красного цвета без рассеяния. Вторая тень будет перекрывать первую и будет жёлтая, с рассеянием и размещена влево и ниже текста. Третья тень будет справа и сверху над текстом. Поскольку у неё цвет не специфицирован, будет использоваться значение свойства 'color' элемента:

H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

Пример(ы):

Рассмотри этот пример:

SPAN.glow {
    background: white;
    color: white;
    text-shadow: black 0px 0px 5px;
}

Здесь свойства 'background' и 'color' имеют одинаковые значения, и свойство 'text-shadow' используется для создания эффекта "солнечного затмения":

Solar eclipse effect [D]

Примечание. Это свойство не определено в CSS1. Некоторые эффекты оттенения (такие как в последнем примере) могут делать текст невидимым в ПА, поддерживающих только CSS1.

16.4 Расстояния между буквами и словами: свойства 'letter-spacing' и 'word-spacing'

'letter-spacing'
Значение:normal | <length> | inherit
Начальное:normal
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:визуальный

Это свойство специфицирует расстояние между символами текста.
Значения имеют следующий смысл:

normal
Нормальное расстояние для текущего шрифта. Это значение позволяет ПА изменять расстояние между символами при выравнивании и распределении текста.
<length>
Обозначает межсимвольное пространство, дополнительное к значению по умолчанию. Значения могут быть отрицательными, но могут иметься ограничения в конкретных реализациях. ПА могут не иметь возможности после этого возможности изменять межсимвольное пространство для распределения и выравнивания текста.

Алгоритмы межсимвольного пространства независимы от ПА. Межсимвольное пространство может также устанавливаться при выравнивании по формату (см. свойство 'text-align').

Пример(ы):

В этом примере пространство между символами в элементах BLOCKQUOTE увеличено на '0.1em'.

BLOCKQUOTE { letter-spacing: 0.1em }

В следующем примере ПАгенту не разрешено изменять межсимвольное пространство:

BLOCKQUOTE { letter-spacing: 0cm }   /* То же, что '0' */

Если расстояние-результат между двумя символами отличается от расстояния по умолчанию, ПА не должны использовать лигатуры.

Соответствующие ПА могут рассматривать значение свойства 'letter-spacing' как 'normal'.

'word-spacing'
Значение:normal | <length> | inherit
Начальное:normal
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:визуальный

Это свойство специфицирует расстояние между словами.
Значения имеют следующий смысл:

normal
Нормальное межсловное пространство, как определено текущим шрифтом и/или ПА.
<length>
Это значение указывает межсловное пространство, дополняющее значение по умолчанию. Значения могут быть отрицательными, но могут существовать ограничения, в зависимости от конкретной реализацией.

Алгоритмы межсловного пространства зависят от ПА. Межсловное пространство устанавливается также при выравнивании по формату (см. свойство 'text-align').

Пример(ы):

Здесь пространство между словами в элементах H1 увеличено на '1em'.

H1 { word-spacing: 1em }

Соответствующие ПА могут рассматривать значение свойство 'letter-spacing' как 'normal'.

16.5 Капитализация: свойство 'text-transform'

'text-transform'
Значение:capitalize | uppercase | lowercase | none | inherit
Начальное:none
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:визуальный

Это свойство управляет эффектами капитализации текста элемента.
Значения имеют следующий смысл:

capitalize
Переводит первый символ каждого слова в верхний регистр.
uppercase
Переводит все символы каждого слова в верхний регистр.
lowercase
Переводит все символы каждого слова в нижний регистр.
none
Нет эффектов капитализации.

Реальная трансформация зависит в каждом конкретном случае от языка письма. См. о способах определения языка элемента в RFC 2070 ([RFC2070]).

Соответствующие ПА могут рассматривать значение 'text-transform' как 'none' для тех символов, которые не входят в репертуар Latin-1, и для элементов на тех языках, в которых трансформация отличается от трансформации, специфицированной таблицей конвертации регистров для ISO 10646 ([ISO10646]).

Пример(ы):

Здесь весь текст в элементе H1 переводится в верхний регистр.

H1 { text-transform: uppercase }

16.6 Пробел: свойство 'white-space'

'white-space'
Значение:normal | pre | nowrap | inherit
Начальное:normal
Применяется: к элементам уровня блока
Наследуется:да
Процентное:N/A
Носитель:визуальный

Это свойство объявляет, как обрабатываются пробелы внутри элемента.
Значения имеют следующий смысл:

normal
Это значение указывает ПАгентам, что нужно сжимать последовательности пробелов и что нужны разрывы строк для заполнения строк бокса. Дополнительные разрывы строк могут создаваться с помощью ввода "\A" в генерируемом содержимом (например, для элемента BR в HTML).
pre
Это значение предотвращает сжатие ПАгентами последовательностей пробелов. Строки переносятся только в коде документа или при появлениях "\A" в генерируемом содержимом.
nowrap
Это значение сжимает пробелы, как 'normal', но подавляет разрывы строк в тексте, за исключением тех, которые создаются "\A" в генерируемом содержимом (например, для элемента BR в HTML).

Пример(ы):

Следующие примеры демонстрируют ожидаемое поведение пробелов в элементах PRE и P и атрибута "nowrap" HTML.

PRE        { white-space: pre }
P          { white-space: normal }
TD[nowrap] { white-space: nowrap }

Соответствующие ПА могут игнорировать свойство 'white-space' в авторских и пользовательских таблицах стилей, но обязаны специфицировать для них значение в таблице стилей по умолчанию.


Полное описание примера заголовка над таблицей

Диаграмма показывает соотношения между таблицей и заголовком над ней и то, как они работают в модели визуального форматирования.

Изображена таблица (голубым цветом) и заголовок (красный) над ней.

Таблица - это сетка 4x4 из пустых ячеек, окружённых помеченной областью полей. Заголовок содержит строку формального текста и окружён помеченной областью полей. Горизонтальные поля между боксами сжаты.


Интерфейс пользователя

18 Интерфейс пользователя

Содержание

  • 18.1 Курсоры: свойство 'cursor'
  • 18.2 Предпочтительные цвета пользователя
  • 18.3 Предпочтительные шрифты пользователя
  • 18.4 Динамические контуры: свойство 'outline'
    • 18.4.1 Контуры и фокус
  • 18.5 Увеличение

18.1 Курсоры: свойство 'cursor'

'cursor'
Значение:[ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit
Начальное:auto
Применяется: ко всем элементам
Наследуется:да
Процентное:N/A
Носитель:визуальный, интерактивный

Это свойство специфицирует тип курсора указательного устройства.
Значения имеют следующий смысл:

auto
пользовательский агент (ПА) определяет курсор на базе текущего контекста.
crosshair
простой крест (например, увеличение знака "+" с помощью коротких отрезков).
default
курсор по умолчанию, зависящий от платформы. Часто отображается стрелкой.
pointer
курсор - указатель на ссылку.
move
обозначает то, что перемещается.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
обозначают перемещение какого-либо края. Например, курсор 'se-resize' используется, если передвижение начинается в юго-восточном углу бокса.
text
обозначает текст, который может быть выделен. Часто отображается как вертикальная черта I.
wait
обозначает, что программа занята и пользователь должен подождать. Часто отображается как (песочные) часы.
help
для объекта под курсором имеется вспомогательная информация. Часто отображается как знак вопроса или воздушный шар.
<uri>
ПА получает курсор из ресурса, обозначенного в URI. Если ПА не может обработать первый курсор из списка курсоров, он должен попытаться обработать второй, и т.д. Если ПА не может обработать ни один курсор, определённый пользователем, он обязан использовать общий курсор в конце списка.

Пример(ы):

P { cursor : url("mything.cur"), url("second.csr"), text; }

18.2 Предпочтительные цвета пользователя

В дополнение к возможности устанавливать предопределённые значения цветов для текста, фона, и т.д., CSS2 позволяет авторам специфицировать цвета таким образом, чтобы интегрировать их в графическую среду пользователя. Таблицы стилей, учитывающие пользовательские установки, дают следующие преимущества:

  1. Создают страницы, соответствующие привычкам и вкусам пользователя.
  2. Создают страницы более доступными, т.к. текущие пользовательские установки могут быть рассчитаны на людей с физическими проблемами.

Набор значений, определённых для системных цветов, представляется исчерпывающим. Для систем, не имеющих соответствующих значений, специфицированное значение должно отображаться в ближайший системный атрибут или в цвет по умолчанию.

Далее дан список дополнительных значений для относящихся к цвету атрибутов CSS и их основной смысл. Любое свойство цвета (например, 'color' или 'background-color') может иметь одно из следующих названий. Хотя они и нечувствительны к регистру, рекомендуется использовать смешанную капитализацию, как показано ниже, чтобы сделать названия более понятными.

ActiveBorder
Рамка активного окна.
ActiveCaption
Заголовок активного окна.
AppWorkspace
Цвет фона многодокументного интерфейса.
Background
Фон рабочего стола.
ButtonFace
Цвет переднего плана 3-мерных элементов.
ButtonHighlight
Тёмная тень для 3-мерных элементов (для краёв, выступающих из светлой основы).
ButtonShadow
Цвет тени для 3-мерных элементов.
ButtonText
Текст кнопки.
CaptionText
Текст заголовка, бокса и в боксе прокручиваемого списка.
GrayText
Серый ("недоступен") текст. Это цвет установлен в #000 на тот случай, если текущий дисплей не поддерживает сплошной серый цвет.
Highlight
Объект(ы), выделенный в элементе управления.
HighlightText
Текст объекта(ов), выделенного в элементе управления.
InactiveBorder
Рамка неактивного окна.
InactiveCaption
Заголовок неактивного окна.
InactiveCaptionText
Цвет текста неактивного заголовка.
InfoBackground
Цвет фона элементов подсказки.
InfoText
Цвет текста элементов подсказки.
Menu
Фон меню.
MenuText
Текст меню.
Scrollbar
Серая область прокрутки.
ThreeDDarkShadow
Тёмная тень для 3-мерных элементов дисплея.
ThreeDFace
Цвет переднего плана для 3-мерных элементов дисплея.
ThreeDHighlight
Цвет подсветки для 3-мерных элементов дисплея.
ThreeDLightShadow
Светлый цвет для 3-мерных элементов дисплея (для краёв, выступающих из светлой основы).
ThreeDShadow
Тёмная тень для 3-мерных элементов дисплея.
Window
Фон окна.
WindowFrame
Кадр окна.
WindowText
Текст в окнах.

Пример(ы):

Например, чтобы установить цвета фона и переднего плана в параграфе в те же значения, что и у окна пользователя, напишите так:

P { color: WindowText; background-color: Window }

18.3 Предпочтительные шрифты пользователя

Как и с цветами, авторы могут специфицировать шрифты так, чтобы использовать системные ресурсы пользователя. См. детали в свойстве 'font'.

18.4 Динамические контуры: свойство 'outline'

Иногда авторам таблиц стилей может понадобиться создать контуры вокруг визуальных объектов, таких как кнопки, активные поля формы, карты изображений и т.п., чтобы выделить их. Контуры CSS2 отличаются от рамок в следующем:

  1. Контуры не занимают пространство.
  2. Контуры могут не быть прямоугольными.

Свойства контуров управляют стилем этих динамических контуров.

'outline'
Значение:[ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit
Начальное:см. конкретные свойства
Применяется: ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный, интерактивный
'outline-width'
Значение:<border-width> | inherit
Начальное:medium
Применяется: ко всем элементам
Наследуется:нет
Процентное: N/A
Носитель:визуальный, интерактивный
'outline-style'
Значение:<border-style> | inherit
Начальное:none
Применяется: ко всем элементам
Наследуется:нет
Процентное: N/A
Носитель:визуальный, интерактивный
'outline-color'
Значение:<color> | invert | inherit
Начальное:invert
Применяется: ко всем элементам
Наследуется:нет
Процентное: N/A
Носитель:визуальный, интерактивный

Контур, созданный свойствами контуров, прорисовывается "поверх" бокса, т.е. контур всегда сверху и не влияет на позицию и размер бокса или любых других боксов. Следовательно, отображение или подавление контуров не вызывает перерисовки.

Контур прорисовывается сразу за краем рамки.

Контуры могут быть непрямоугольными. Например, если элемент разбит на несколько строк, контур будет минимальным необходимым для включения всех боксов элемента. В противоположность рамкам, контур не открыт в начале или в конце строчного бокса, но всегда полностью замкнут.

Свойство 'outline-width' принимает те же значения, что и 'border-width'.

Свойство 'outline-style' принимает те же значения, что и 'border-style', за исключением 'hidden', который не является допустимым стилем контура.

Свойство 'outline-color' принимает все цвета, как и ключевое слово 'invert'. 'Invert' должен производить инверсию цвета пикселов экрана. Это обычный приём для того, чтобы удостовериться, что рамка фокуса видна независимо от цвета фона.

Свойство 'outline' это сокращённое свойство, устанавливающее все три: 'outline-style', 'outline-width' и 'outline-color'.

Обратите внимание, что контур одинаков на всех сторонах. В отличие от рамок, свойства 'outline-top' или 'outline-left' отсутствуют.

В этой спецификации не определено, как прорисовываются несколько перекрывающихся контуров, или как контуры прорисовываются для боксов, которые частично скрыты за другими элементами.

Примечание. Поскольку контур фокуса не влияет на форматирование (т.е. для него не выделяется пространство в модели бокса), он может нормально перекрывать другие элементы на странице.

Пример(ы):

Прорисовка толстого контура вокруг элемента BUTTON:

BUTTON { outline-width : thick }

Для динамического изменения ширины контура могут использоваться скрипты, не вызывая при этом перерисовки.

18.4.1 Контуры и фокус

Графические интерфейсы пользователя могут использовать контуры вокруг элементов, чтобы сообщать пользователю, какой элемент страницы имеет фокус. Эти контуры дополняют рамки, и включение и выключение не должно вызывать перерисовки документа. Фокус является субъектом действий пользователя в документе (например, при вводе текста, выборе кнопки, и т.д.). ПА, поддерживающие группы интерактивных носителей, обязаны отслеживать, где находится фокус, и обязаны также отображать фокус. Это может быть сделано путём использования динамических контуров вместе с псевдоклассом :focus.

Пример(ы):

Чтобы прорисовать толстую чёрную линию вокруг элемента, когда он имеет фокус, толстую красную линию, когда он активен, можно использовать следующие правила:

:focus  { outline: thick solid black }
:active { outline: thick solid red }

18.5 Увеличение

Рабочая группа CSS считает, что увеличение документа или его части не должно специфицироваться через таблицы стилей. ПА могут поддерживать такое увеличение разными путями (например, увеличивать изображение, усиливать звук и т.п.).

При увеличении страницы ПАгенты должны выдерживать соотношения между позиционированными элементами.


Модель визуального форматирования. Детали.

10 Модель визуального форматирования. Детали.

Содержание

  • 10.1 Определение "содержащего блока"
  • 10.2 Ширина содержимого: свойство 'width'
  • 10.3 Вычисление ширины и полей
    • 10.3.1 Инлайн, незамещаемые элементы
    • 10.3.2 Инлайн, замещаемые элементы
    • 10.3.3 Уровень блока, незамещаемые элементы при нормальном всплывании
    • 10.3.4 Уровень блока, замещаемые элементы при нормальном всплывании
    • 10.3.5 Всплывание, незамещаемые элементы
    • 10.3.6 Всплывание, замещаемые элементы
    • 10.3.7 Абсолютно позиционированные незамещаемые элементы
    • 10.3.8 Абсолютно позиционированные замещаемые элементы
  • 10.4 Минимальная и максимальная ширина: 'min-width' и 'max-width'
  • 10.5 Высота содержимого: свойство 'height'
  • 10.6 Вычисление высоты и полей
    • 10.6.1 Инлайн, незамещаемые элементы
    • 10.6.2 Инлайн, замещаемые элементы уровня блока, замещаемые элементы при нормальном всплывании и всплывание, замещаемые элементы
    • 10.6.3 Уровень блока, незамещаемые элементы при нормальном всплывании и всплывание, незамещаемые элементы
    • 10.6.4 Абсолютно позиционированные незамещаемые элементы
    • 10.6.5 Абсолютно позиционированные замещаемые элементы
  • 10.7 Минимальная и максимальная высота: 'min-height' и 'max-height'
  • 10.8 Подсчёт высоты строк: свойства 'line-height' и 'vertical-align'
    • 10.8.1 Габариты и полугабариты

10.1 Определение "содержащего блока"

Позиция и размер бокса(ов) элемента иногда вычисляются относительно определённого прямоугольника, называемого содержащий блок элемента.
Содержащий блок элемента определяется так:

  1. Содержащий блок (называемый начальным содержащим блоком), в котором находится корневой элемент, выбирается пользовательским агентом (ПА).
  2. Для других элементов, если только элемент не позиционирован абсолютно, содержащий блок формируется краем содержимого бокса ближайшего предка уровня блока.
  3. Если элемент имеет 'position: fixed', то содержащий блок устанавливается портом просмотра.
  4. Если элемент имеет 'position: absolute', то содержащий блок устанавливается ближайшим предком с 'position' , отличным от 'static', следующим образом:
    1. Если предок - уровня блока, содержащий блок формируется краем заполнения предка.
    2. Если предок - инлайн-уровня, содержащий блок зависит от свойства 'direction' предка:
      1. Если 'direction' - 'ltr', верхний и левый края содержащего блока являются верхним и левым краями первого бокса, генерируемого предком, а нижний и правый края являются нижним и правым краями содержимого последнего бокса предка.
      2. Если 'direction' - 'rtl', верхний и правый края содержащего блока являются верхним и правым краями первого бокса, генерируемого предком, а нижний и левый края являются нижним и левым краями содержимого последнего бокса предка.

    Если такого предка нет, край содержимого бокса корневого элемента устанавливает содержащий блок.

Пример(ы):

Содержащие блоки (СБ) без позиционирования в этом документе:

<HTML>
   <HEAD>
      <TITLE>Illustration of containing blocks</TITLE>
   </HEAD>
   <BODY id="body">
      <DIV id="div1">
      <P id="p1">This is text in the first paragraph...</P>
      <P id="p2">This is text <EM id="em1"> in the
      <STRONG id="strong1">second</STRONG> paragraph.</EM></P>
      </DIV>
   </BODY>
</HTML>

устанавливаются так:

Для бокса, генерируемого | СБ устанавливается
body | начальным СБ (зависит от ПА)
div1 | body
p1 | div1
p2 | div1
em1 | p2
strong1 | p2

Если позиция "div1":

   #div1 { position: absolute; left: 50px; top: 50px }

то его содержащий блок - уже не "body"; им становится начальный содержащий блок (поскольку отсутствуют другие позиционированные боксы предка).

Также, если позиция "em1":

   #div1 { position: absolute; left: 50px; top: 50px }
   #em1  { position: absolute; left: 100px; top: 100px }

таблица содержащих блоков будет:

Для бокса, генерируемого | СБ устанавливается
body | начальным СБ
div1 | начальным СБ
p1 | div1
p2 | div1
em1 | div1
strong1 | em1

При позиционировании "em1", его содержащим блоком становится ближайший позиционированный бокс предка (т.е. тот, который сгенерирован "div1").

10.2 Ширина содержимого: свойство 'width'

'width'
Значение:<length> | <percentage> | auto | inherit
Начальное:auto
Применяется: ко всем элементам, кроме незамещаемых инлайн-элементов, рядов таблиц и групп рядов
Наследуется:нет
Процентное:относительно ширины содержащего блока
Носитель:визуальный

Это свойство специфицирует ширину содержимого боксов, генерируемых элементами уровня блока и замещаемыми элементами.

Это свойство не применяется к незамещаемым элементам инлайн-уровня. Ширина боксов незамещаемых инлайн-элементов, это ширина отображаемого внутри них содержимого (до любого относительного смещения дочерних элементов). Напоминаем, что инлайн-боксы всплывают внутри строчных боксов. Ширина строчных боксов задаётся их содержащим блоком, Но может быть уменьшена при наличии поплавков.

Ширина бокса замещаемого элемента является внутренней и может масштабироваться ПА, если значение этого свойства отличается от 'auto'.
Значения имеют следующий смысл:

<length>
Специфицирует фиксированную ширину.
<percentage>
Специфицирует ширину в процентах. Проценты вычисляются относительно ширины содержащего блока генерируемого бокса.
auto
Ширина зависит от значений других свойств. См. следующие разделы.

Отрицательные значения для 'width' не допускаются.

Пример(ы):

Это правило фиксирует ширину содержимого параграфа в 100 пикселов:

P { width: 100px }

10.3 Вычисление ширины и полей

Вычисленные значения свойств 'width', 'margin-left', 'margin-right', 'left' и 'right' для элементов зависят от типа генерируемого бокса и друг от друга. В принципе вычисленные значения - те же, что и специфицированные, с 'auto', замещаемым другим подходящим значением, но есть и исключения. Должны быть рассмотрены следующие варианты:

  1. инлайн, незамещаемые элементы
  2. инлайн, замещаемые элементы
  3. уровень блока, незамещаемые элементы при нормальном всплывании
  4. уровень блока, замещаемые элементы при нормальном всплывании
  5. всплывание, незамещаемые элементы
  6. всплывание, замещаемые элементы
  7. абсолютно позиционированные незамещаемые элементы
  8. абсолютно позиционированные замещаемые элементы

Пункты 1-6 включают относительное позиционирование.

10.3.1 Инлайн, незамещаемые элементы

Свойство 'width' не применяется. Специфицированное значение 'auto' для 'left', 'right', 'margin-left' или 'margin-right' становится вычисленным значением '0'.

10.3.2 Инлайн, замещаемые элементы

Специфицированное значение 'auto' для 'left', 'right', 'margin-left' или 'margin-right' становится вычисленным значением '0'. Специфицированное значение 'auto' для 'width' даёт внутреннюю ширину элемента как вычисленное значение.

10.3.3 Уровень блока, незамещаемые элементы при нормальном всплывании

Если 'left' или 'right' заданы как 'auto', их вычисленное значение - '0'. Следующее условие обязано соблюдаться между свойствами:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = ширина содержащего блока

(Если стиль рамки - 'none', используйте '0' как ширину рамки.) Если все вышеуказанные имеют специфицированные значения, отличные от 'auto', то говорят, что значения "переограниченны", и одно из вычисленных значений должно будет получить значение, отличное от своего специфицированного. Если свойство 'direction' имеет значение 'ltr', специфицированное значение 'margin-right' игнорируется и новое значение вычисляется так, чтобы сделать равенство верным. Если значение 'direction' - 'rtl', то же самое выполняется для 'margin-left'.

Если имеется только одно значение, специфицированное как 'auto', его вычисленное значение является результатом уравнения.

Если 'width' установлено в 'auto', любые другие значения 'auto' становятся '0', и 'width' является результатом уравнения.

Если и 'margin-left' , и 'margin-right' - 'auto', их вычисленные значения равны.

10.3.4 Уровень блока, замещаемые элементы при нормальном всплывании

Если 'left' или 'right' - 'auto', их вычисленное значение - '0'. Если 'width' специфицировано как 'auto', его значением является внутренняя ширина элемента. Если одно из полей - 'auto', его вычисленное значение задаётся вышеприведённым уравнением. Кроме того, если оба поля - 'auto', их вычисленные значения равны.

10.3.5 Всплывание, незамещаемые элементы

Если 'left', 'right', 'width', 'margin-left' или 'margin-right' специфицированы как 'auto', их вычисленное значение - '0'.

10.3.6 Всплывание, замещаемые элементы

Если 'left', 'right', 'margin-left' или 'margin-right' специфицированы как 'auto', их вычисленное значение - '0'. Если 'width' - 'auto', его значением является внутренняя ширина элемента.

10.3.7 Абсолютное позиционирование, незамещаемые элементы

Условие, определяющее вычисленные значения для этих элементов:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = ширина содержащего блока

(Если стиль рамки - 'none', используется '0' как значение ширины рамки.) Решение данного условия достигается серией замен в следующем порядке:

  1. Если 'left' имеет значение 'auto' при 'direction' - 'ltr', 'auto' заменяется расстоянием от левого края содержащего блока до края левого поля гипотетического бокса, который мог бы быть первым боксом элемента, если его свойство 'position' было бы 'static'. (Но вместо того, чтобы действительно рассчитать этот бокс, ПА свободны предполагать о его возможной позиции.) Значение является отрицательным, если гипотетический бокс находится слева от содержащего блока.
  2. Если 'right' имеет значение 'auto' при 'direction' - 'rtl', 'auto' заменяется расстоянием от правого края содержащего блока до края правого поля того же гипотетического бокса, что и выше. Значение является положительным, если гипотетический бокс находится слева от края содержащего блока.
  3. Если 'width' - 'auto', любые оставшиеся 'auto' для 'left' или 'right' заменяются на '0'.
  4. Если 'left', 'right' или 'width' - (ещё) 'auto', 'auto' в 'margin-left' или 'margin-right' заменяются на '0'.
  5. Если в данной точке 'margin-left' и 'margin-right' всё ещё 'auto', уравнение решается с дополнительным условием: что эти два поля обязаны получить одинаковые значения.
  6. Если в данной точке осталось только одно 'auto', уравнение решается с этим значением.
  7. Если в данной точке значения переограниченны, игнорируется значение 'left' (если 'direction' - 'rtl') или 'right' (если 'direction' - 'ltr') и уравнение решается с этим значением.

10.3.8 Абсолютно позиционированные замещаемые элементы

Ситуация напоминает предыдущую, за исключением того, что элемент имеет внутреннюю ширину. Последовательность замен теперь:

  1. Если 'width' - 'auto', оно замещается внутренней шириной элемента.
  2. Если 'left' имеет значение 'auto' при 'direction' - 'ltr', 'auto' замещается расстоянием от левого края содержащего блока до края левого поля гипотетического бокса, который мог бы быть первым боксом элемента, если его свойство 'position' было бы 'static'. (Но вместо того, чтобы действительно рассчитать этот бокс, ПА свободны предполагать о его возможной позиции.) Значение является отрицательным, если гипотетический бокс находится слева от содержащего блока.
  3. Если 'right' имеет значение 'auto' при 'direction' - 'rtl', 'auto' заменяется расстоянием от правого края содержащего блока до края правого поля того же гипотетического бокса, что и выше. Значение является положительным, если гипотетический бокс находится слева от края содержащего блока.
  4. Если 'left' или 'right' - 'auto', любое 'auto' для 'margin-left' или 'margin-right' замещается на '0'.
  5. Если в данной точке 'margin-left' и 'margin-right' всё ещё 'auto', уравнение решается с дополнительным условием: что эти два поля обязаны получить одинаковые значения.
  6. Если в данной точке осталось только одно 'auto', уравнение решается с этим значением.
  7. Если в данной точке значения переограниченны, игнорируется значение 'left' (если 'direction' - 'rtl') или 'right' (если 'direction' - 'ltr') и уравнение решается с этим значением.

10.4 Минимальная и максимальная ширина: 'min-width' и 'max-width'

'min-width'
Значение:<length> | <percentage> | inherit
Начальное:зависит от ПА
Применяется: ко всем элементам, за исключением незамещаемых инлайн элементов и элементов таблицы
Наследуется:нет
Процентное:относительно ширины содержащего блока
Носитель:визуальный
'max-width'
Значение:<length> | <percentage> | none | inherit
Начальное:none
Применяется: ко всем элементам, за исключением незамещаемых инлайн элементов и элементов таблицы
Наследуется:нет
Процентное: относительно ширины содержащего блока
Носитель:визуальный

Эти два свойства позволяют авторам ограничить ширину бокса определёнными рамками.
Значения имеют следующий смысл:

<length>
Специфицирует фиксированную минимальную и максимальную вычисленную ширину.
<percentage>
Специфицирует проценты для определения вычисленного значения. Проценты высчитываются относительно ширины содержащего блока генерируемого бокса.
none
(Только для 'max-width') Нет ограничений на ширину бокса.

Следующий алгоритм описывает, как эти два свойства воздействуют на вычисленное значение свойства 'width':

  1. Ширина вычисляется (без 'min-width' и 'max-width') по вышеприведённым правилам "Вычисление ширины и полей".
  2. Если вычисленное значение 'min-width' больше, чем значение 'max-width', то 'max-width' устанавливается в значение 'min-width'.
  3. Если вычисленная ширина больше, чем 'max-width', вышеприведённые правила применяются вновь, но на этот раз с использованием значения 'max-width' как специфицированного для 'width'.
  4. Если вычисленная ширина меньше, чем 'min-width', вышеприведённые правила применяются вновь, но на этот раз с использованием значения 'min-width' как специфицированного для 'width'.

ПА может определить неотрицательное минимальное значение для свойства 'min-width', которое (значение) может варьироваться от элемента к элементу и даже зависеть от других свойств. Если 'min-width' выходит за нижнюю границу этого лимита из-за того, что было установлено явно, или из-за того, что оно 'auto' и вышеприведённые правила сделают его слишком маленьким, ПА может использовать минимальное значение как вычисленное значение.

10.5 Высота содержимого: свойство 'height'

'height'
Значение:<length> | <percentage> | auto | inherit
Начальное:auto
Применяется: ко всем элементам, кроме незамещаемых инлайн-элементов, столбцов и групп столбцов таблицы
Наследуется:нет
Процентное:см. текст
Носитель:визуальный

Свойство определяет высоту содержимого боксов, генерируемых элементами уровня блока и замещаемыми элементами.

Это свойство не применяется к незамещаемым элементам инлайн-уровня. Высота боксов незамещаемых инлайн-элементов задаётся значением (возможно, наследуемым) 'line-height' элемента.
Значения имеют следующий смысл:

<length>
Специфицирует фиксированную высоту.
<percentage>
Специфицирует высоту в процентах. Проценты высчитываются относительно высоты содержащего блока генерируемого бокса. Если высота содержащего блока не специфицирована явно (т е. зависит от высоты содержимого), значение интерпретируется как 'auto'.
auto
Высота зависит от значений других свойств. См. ниже.

Отрицательные значения 'height' недопустимы.

Пример(ы):

Следующее правило фиксирует высоту параграфа в 100 пикселов:

P { height: 100px }

Параграф, требующий высоты более 100 пикселов, будет вызывать переполнение в соответствии со свойством 'overflow'.

10.6 Вычисление высоты и полей

Для вычисления значений 'top', 'margin-top', 'height', 'margin-bottom' и 'bottom' обязано быть проведено разграничение между различными видами боксов:

  1. инлайн, незамещаемые элементы
  2. инлайн, замещаемые элементы
  3. уровень блока, незамещаемые элементы при нормальном всплывании
  4. уровень блока, замещаемые элементы при нормальном всплывании
  5. всплывание, незамещаемые элементы
  6. всплывание, замещаемые элементы
  7. абсолютно позиционированные незамещаемые элементы
  8. абсолютно позиционированные замещаемые элементы

Пункты 1-6 включают относительное позиционирование.

10.6.1 Инлайн, незамещаемые элементы

Если 'top', 'bottom', 'margin-top' или 'margin-bottom' установлены в 'auto', их вычисленное значение будет '0'. Свойство 'height' не применяется, но высота бокса задаётся свойством 'line-height'.

10.6.2 Инлайн, замещаемые элементы уровня блока, замещаемые элементы при нормальном всплывании и всплывание, замещаемые элементы

Если 'top', 'bottom', 'margin-top' или 'margin-bottom' установлены в 'auto', их вычисленное значение будет '0'. Если 'height' - 'auto', вычисленное значение будет внутренней высотой.

10.6.3 Уровень блока, незамещаемые элементы при нормальном всплывании и всплывание, незамещаемые элементы

Если 'top', 'bottom', 'margin-top' или 'margin-bottom' - 'auto', их вычисленное значение - '0'. Если 'height' - 'auto', высота зависит от того, имеет ли элемент дочерние элементы уровня блока. Если он имеет дочерние элементы только инлайн-уровня, высота будет от верха самого верхнего строчного бокса до низа самого нижнего строчного бокса. Если он имеет дочерние элементы уровня блока, это будет расстояние от верхнего края рамки самого верхнего дочернего бокса уровня блока до нижнего края рамки самого нижнего дочернего бокса уровня блока. В расчёт берутся только потомки при нормальном всплывании (т.е. боксы-поплавки и абсолютно позиционированные боксы игнорируются, а относительно позиционированные боксы рассматриваются без своих смещений). Обратите внимание, что дочерний бокс может быть анонимным боксом.

10.6.4 Абсолютно позиционированные незамещаемые элементы

Для абсолютно позиционированных элементов вертикальные размеры должны удовлетворять следующему условию:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = высота содержащего блока

(Если стиль рамки - 'none', '0' используется как значение ширины рамки.) Решение данного уравнения достигается путём проведения ряда замен в следующем порядке:

  1. Если 'top' имеет значение 'auto', оно заменяется расстоянием от верхнего края содержащего блока до края верхнего поля гипотетического бокса, который мог бы быть первым боксом элемента, если его свойство 'position' было бы 'static'. (Но вместо того, чтобы действительно рассчитать этот бокс, ПА свободны предполагать о его возможной позиции.) Значение является отрицательным, если гипотетический бокс находится сверху от содержащего блока.
  2. Если и 'height' и 'bottom' - 'auto', 'bottom' заменяется на '0'.
  3. Если 'bottom' или 'height' (ещё) имеют значение 'auto', любое 'auto' в 'margin-top' или 'margin-bottom' заменяется на '0'.
  4. Если в данной точке и 'margin-top' , и 'margin-bottom' - всё ещё 'auto', уравнение решается с помощью дополнительного условия: что эти два поля обязаны получить одинаковые значения.
  5. Если в данной точке имеется только одно значение 'auto', уравнение решается с этим значением.
  6. Если в данной точке значения переограничены, игнорируется значение 'bottom' , и уравнение решается с этим значением.

10.6.5 Абсолютно позиционированные замещаемые элементы

Ситуация подобна предыдущей, за исключением того, что элемент имеет внутреннюю высоту. Последовательность замен теперь:

  1. Если 'height' - 'auto', оно заменяется внутренней высотой элемента.
  2. Если 'top' имеет значение 'auto', оно заменяется расстоянием от верхнего края содержащего блока до края верхнего поля гипотетического бокса, который мог бы быть первым боксом элемента, если его свойство 'position' было бы 'static'. (Но вместо того, чтобы действительно рассчитать этот бокс, ПА свободны предполагать о его возможной позиции.) Значение является отрицательным, если гипотетический бокс находится сверху от содержащего блока.
  3. Если 'bottom' - 'auto', 'auto' в 'margin-top' или 'margin-bottom' заменяется на '0'.
  4. Если в данной точке и 'margin-top' , и 'margin-bottom' - всё ещё 'auto', уравнение решается с помощью дополнительного условия: что эти два поля обязаны получить одинаковые значения.
  5. Если в данной точке имеется только одно значение 'auto', уравнение решается с этим значением.
  6. Если в данной точке значения переограничены, игнорируется значение 'bottom' , и уравнение решается с этим значением.

10.7 Минимальная и максимальная высота: 'min-height' и 'max-height'

Иногда необходимо ограничить высоту элементов определёнными рамками. Два свойства выполняют эту функцию:

'min-height'
Значение:<length> | <percentage> | inherit
Начальное:0
Применяется: ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы
Наследуется:нет
Процентное:относительно высоты содержащего блока
Носитель:визуальный
'max-height'
Значение:<length> | <percentage> | none | inherit
Начальное:none
Применяется: ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы
Наследуется:нет
Процентное:относительно высоты содержащего блока
Носитель:визуальный

Эти два свойства позволяют авторам ограничить высоту боксов определённым диапазоном. Значения имеют следующий смысл:

<length>
Специфицирует фиксированный минимум и максимум вычисленной высоты.
<percentage>
Специфицирует проценты для определения вычисленного значения. Проценты высчитываются относительно высоты содержащего блока генерируемого бокса. Если высота содержащего блока не специфицирована явно (т.е. зависит от высоты содержимого), процентные значения интерпретируются так же, как 'auto'.
none
(Только для 'max-height') Высота бокса не ограничена.

Следующий алгоритм описывает, как эти два свойства вводят вычисленное значение свойства 'height':

  1. Высота вычисляется (без 'min-height' и 'max-height') по вышеприведённым правилам в "Вычислении высоты и полей".
  2. Если вычисленное значение 'min-height' больше значения 'max-height', 'max-height' устанавливается в значение 'min-height'.
  3. Если вычисленная высота больше, чем 'max-height', вновь применяются вышеприведённые правила, но на этот раз с использованием значения 'max-height' как специфицированного значения для 'height'.
  4. Если вычисленная высота меньше, чем 'min-height', вновь применяются вышеприведённые правила, но на этот раз с использованием значения 'min-height' как специфицированного значения для 'height'.

10.8 Подсчёт высоты строк: свойства 'line-height' и 'vertical-align'

Как описано в разделе о контекстах инлайн-форматирования, ПА заполняют инлайн-боксами вертикальный стэк строчных боксов. Высота инлайн-бокса определяется так:

  1. Вычисляется высота каждого инлайн-бокса в строчном боксе (см. "Вычисление высоты и полей" и свойство 'line-height').
  2. Инлайн-боксы выравниваются по вертикали в соответствии с их свойствами 'vertical-align'.
  3. Высота строчного бокса - это расстояние между верхом самого верхнего бокса и низом самого нижнего бокса.

Пустые инлайн-элементы генерируют пустые инлайн-боксы, но эти боксы всё же имеют поля, заполнение, рамки и высоту строки и, таким образом, вычисления выполняются как с элементами, имеющими содержимое.

Заметьте, что если все боксы в строчном боксе выровнены по своему низу, то строчный бокс будет иметь точно такую же высоту, как и самый высокий бокс. Если, однако, боксы выровнены по общей базовой линии, верх и низ строчного бокса могут не касаться верха и низа самого высокого бокса.

10.8.1 Габариты и полугабариты

Поскольку высота инлайн-бокса может отличаться от размера шрифта текста бокса (например, 'line-height' > 1em), может иметься некоторое пространство сверху и снизу от выводимых глифов. Разница между размером шрифта и вычисленным значением 'line-height' называется leading\габарит. Половина габарита называется полугабарит.

ПА центрирует глифы по вертикали в инлайн-боксе, добавляя полугабарит сверху и снизу. Например, если блок текста имеет высоту '12pt' и значение 'line-height' - '14pt', должно быть добавлено 2pts дополнительного пространства: 1pt сверху и 1pt снизу от букв. (Это применимо также и к пустым боксам, как если бы пустой бокс содержал бесконечно узкую букву.)

Если значение 'line-height' меньше размера шрифта, окончательная высота инлайн-бокса будет меньше, чем размер шрифта, и выводимые глифы будут "просачиваться" за пределы бокса. Если такой бокс касается края строчного бокса, выводимые глифы будут также "просачиваться" в смежный строчный бокс.

Хотя поля, рамки и заполнение незамещаемых элементов не учитываются при подсчёте высоты инлайн-бокса (и, следовательно, высоты строчного бокса), они всё же отображаются вокруг инлайн-боксов. Это значит, что если высота строчного бокса короче внешних краёв содержащихся в нём боксов, то фон и цвета заполнения и рамок могут "просачиваться" в смежные строчные боксы. Однако в этом случае некоторые ПА могут использовать строчный бокс для "обрезки" областей заполнения и рамок (т.е. - не выводить их).

'line-height'
Значение:normal | <number> | <length> | <percentage> | inherit
Начальное:normal
Применяется: ко всем элементам
Наследуется:да
Процентное:относительно размера шрифта самого элемента
Носитель:визуальный

Если это свойство установлено в элементе уровня блока, который (элемент) имеет содержимое, составленное из элементов инлайн-уровня, оно специфицирует минимальную высоту каждого генерируемого инлайн-бокса.

Если это свойство установлено в элементе инлайн-уровня, оно специфицирует точную высоту каждого бокса, генерируемого элементом (за исключением замещаемых инлайн-элементов, когда высота бокса задаётся свойством 'height').
Значения этого свойства имеют следующий смысл:

normal
Сообщает в ПА, что нужно установить вычисленное значение в "приемлемое" значение на базе размера шрифта элемента. Значение имеет тот же смысл, что и <number>. Для 'normal' мы рекомендуем значения в пределах от 1.0 до 1.2.
<length>
Высота бокса устанавливается в эту величину. Отрицательные значения недопустимы.
<number>
Вычисленное значение свойства является числом, умноженным на размер шрифта элемента. Отрицательные значения недопустимы. В то же время, число, не являющееся вычисленным значением, наследуется.
<percentage>
Вычисленное значение свойства является процентами от вычисленного размера шрифта элемента. Отрицательные значения недопустимы.

Пример(ы):

Эти три правила дают в результате одно значение высоты строки:

DIV { line-height: 1.2; font-size: 10pt }     /* число */
DIV { line-height: 1.2em; font-size: 10pt }   /* размер */
DIV { line-height: 120%; font-size: 10pt }    /* проценты */

Если элемент содержит текст, выводимый с помощью нескольких шрифтов, ПА должен определить значение 'line-height' в соответствии с размером самого большого шрифта.

Вообще, если имеется только одно значение 'line-height' для всех инлайн-боксов параграфа (и нет высоких изображений), вышесказанное гарантирует, что базовые линии последовательных строк точно отделены от 'line-height'. Это важно в тех случаях, когда столбцы текста с различными шрифтами должны быть выровнены, например, в таблице.

Обратите внимание, что замещаемые элементы имеют свойства 'font-size' и 'line-height', даже если они (свойства) не используются непосредственно для определения высоты бокса. 'font-size' , однако, используется для определения единиц измерения 'em' и 'ex', а 'line-height' задействовано в свойстве 'vertical-align'.

'vertical-align'
Значение:baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Начальное:baseline
Применяется: к инлайн-элементам и элементам 'table-cell'
Наследуется:нет
Процентное:относительно 'line-height' самого элемента
Носитель:визуальный

Это свойство влияет на вертикальное позиционирование внутри боксов строчного бокса, генерируемых элементом инлайн-уровня. Следующие значения имеют смысл только относительно родительского элемента инлайн-уровня или родительского элемента уровня блока, если этот элемент генерирует анонимные инлайн-боксы; значения не действуют, если такой родитель не существует.

Примечание. Значения этого свойства имеют несколько другой смысл в контексте таблиц. См. подробнее в разделе об алгоритме высоты таблиц.

baseline
Выравнивает базовую линию бокса с базовой линией бокса-родителя. Если бокс не имеет базовой линии, выравнивается низ бокса с базовой линией родителя.
middle
Выравнивает вертикальную среднюю точку бокса с базовой линией бокса-родителя плюс половина x-высоты родителя.
sub
Понижает базовую линию бокса до соответствующей позиции подиндексов родительского бокса. (Это значение не воздействует на размер шрифта текста элемента.)
super
Повышает базовую линию бокса до соответствующей позиции надиндексов родительского бокса. (Это значение не воздействует на размер шрифта текста элемента.)
text-top
Выравнивает верх бокса с верхом шрифта родительского элемента.
text-bottom
Выравнивает низ бокса с низом шрифта родительского элемента.
<percentage>
Увеличивает (позитивное значение) или уменьшает (негативное значение) бокс на эту величину (процент значения 'line-height'). Значение '0%' это то же, что 'baseline'.
<length>
Увеличивает (позитивное значение) или уменьшает (негативное значение) бокс на эту величину. Значение '0cm' это то же, что 'baseline'.

Остальные значения относятся к строчному боксу, в котором появляется генерируемый бокс:

top
Выравнивает верх бокса с верхом строчного бокса.
bottom
Выравнивает низ бокса с низом строчного бокса.


Визуальные эффекты

11 Визуальные эффекты

Содержание

  • 11.1 Переполнение и сжатие
    • 11.1.1 Переполнение: свойство 'overflow'
    • 11.1.2 Сжатие: свойство 'clip'
  • 11.2 Видимость: свойство 'visibility'

11.1 Переполнение и сжатие

Обычно содержимое бокса блока ограничено краями бокса. В определённых случаях бокс может переполняться, то есть его содержимое частично или полностью находится за пределами бокса, например:

  • Строка не может быть разорвана, и строчный бокс оказывается шире, чем бокс блока.
  • Бокс уровня блока слишком широк для содержащего блока. Это случается, если свойство 'width' элемента имеет такое значение, которое вызывает растекание генерируемого бокса блока за пределы содержащего блока.
  • Высота элемента превосходит явно установленную высоту содержащего блока (т.е. высота содержащего блока определяется свойством 'height', а не высотой содержимого).
  • Бокс позиционирован абсолютно.
  • Бокс имеет отрицательные значения полей.

Когда возникает переполнение, свойство 'overflow' специфицирует, как сжимается бокс ( и сжимается ли). Свойство 'clip' специфицирует размер и форму сжимаемой области. Спецификация маленькой области для сжатия может вызвать сжатие другого видимого содержимого.

11.1.1 Переполнение: свойство 'overflow'

'overflow'
Значение:visible | hidden | scroll | auto | inherit
Начальное:visible
Применяется: к элементам уровня блока и к замещаемым элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Это свойство специфицирует, сжимается ли содержимое элемента уровня блока, если оно переполняет бокс элемента (который действует как содержащий блок для содержимого).
Значения имеют следующий смысл:

visible
Указывает, что содержимое не сжимается, т.е. может отображаться за пределами бокса блока.
hidden
Указывает, что содержимое сжимается и что механизм прокрутки не должен предоставляться для просмотра содержимого вне сжимаемой области; пользователь не получит доступа к сжатому содержимому. Размер и форма сжимаемой области специфицируются свойством 'clip'.
scroll
Означает, что содержимое сжимается и что если ПА использует механизм прокрутки, видимый на экране (такой как полоса прокрутки или паннер), этот механизм должен отображаться для бокса, независимо от того, сжимается его содержимое или нет. Это устраняет возможные проблемы с появлением и скрытием полосы прокрутки в динамическом окружении. Если это значение специфицировано и целевой носитель - 'print' или 'projection', переполняющее содержимое должно быть напечатано.
auto
Поведение значения 'auto' зависит от ПА, но должно вызывать предоставление механизма прокрутки для переполняемых боксов.

Даже если 'overflow' установлено в 'visible', содержимое может быть обрезано до размеров окна документа ПА средой окружения.

Пример(ы):

Рассмотрим следующий пример блока кавычек (BLOCKQUOTE), который слишком велик для своего содержащего блока (установленного DIV). Вот документ-источник:

<DIV>
<BLOCKQUOTE>
<P>I didn't like the play, but then I saw
it under adverse conditions - the curtain was up.
<DIV class="attributed-to">- Groucho Marx</DIV>
</BLOCKQUOTE>
</DIV>

Это таблица стилей, управляющая размерами и стилем генерируемых боксов:

DIV { width : 100px; height: 100px;
      border: thin solid red;
      }

BLOCKQUOTE   { width : 125px; height : 100px;
      margin-top: 50px; margin-left: 50px;
      border: thin dashed black
      }

DIV.attributed-to { text-align : right; }

Начальное значение 'overflow' - 'visible', поэтому BLOCKQUOTE может быть сформатирован без сжатия примерно так:

Rendered overflow [D]

Установка 'overflow' в 'hidden' для элемента DIV, с другой стороны, вызывает усечение BLOCKQUOTE содержащим блоком:

Clipped overflow [D]

Значение 'scroll' сообщит ПАгенту, что поддерживается визуальный механизм прокрутки, чтобы вывести его для обеспечения доступа пользователя к усечённому содержимому.

11.1.2 Сжатие: свойство 'clip'

Сжимаемая область определяет, какая часть выводимого содержимого элемента видна. По умолчанию сжатая область имеет тот же размер и форму, что и бокс(ы) элемента. В то же время сжимаемая область может быть модифицирована свойством 'clip'.

'clip'
Значение:<shape> | auto | inherit
Начальное:auto
Применяется: к элементам уровня блока и к замещаемым элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Свойство 'clip' применяется к элементам, имеющим свойство 'overflow' со значением, отличным от 'visible'.
Значения имеют следующий смысл:

auto
Сжимаемая область имеет тот же размер и размещение, что и бокс(ы) элемента.
<shape>
В CSS2 верными значениями для <shape> являются: rect (<top> <right> <bottom> <left>) где <top>, <bottom> <right>, а <left> специфицирует смещение относительно соответствующих сторон бокса.

<top>, <right>, <bottom> и <left> могут иметь или значение <length> , или 'auto'. Отрицательные значения разрешены. Значение 'auto' указывает, что данный край сжимаемой области будет тем же, что и край генерируемого бокса элемента (т.е. 'auto' означает то же, что '0'.)

Если координаты округляются до пикселных значений, необходимо следить, чтобы не осталось видимых пикселов, когда <left> + <right> равно ширине элемента (или <top> + <bottom> равно высоте элемента), и наоборот, чтобы не оставалось невидимых пикселов, когда эти значения равны 0.

Предки элемента могут также иметь сжатые области (в тех случаях, когда их свойство 'overflow' - 'visible'); то, что отображается, находится на пересечении различных сжатых областей.

Если сжатая область выходит за пределы окна документа ПА, содержимое может быть сжато до размеров окна среды окружения.

Пример(ы):

Эти два правила:

P { clip: rect(5px, 10px, 10px, 5px); }
P { clip: rect(5px, -5px, 10px, 5px); }

создадут прямоугольную сжимаемую область, ограниченную пунктирной линией:

Two clipping regions [D]

Примечание. В CSS2 все сжимаемые области прямоугольны. Мы предполагаем в будущем расширение, разрешающее непрямоугольное сжатие.

11.2 Видимость: свойство 'visibility'

'visibility'
Значение:visible | hidden | collapse | inherit
Начальное:inherit
Применяется: ко всем элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Свойство 'visibility' специфицирует, отображаются ли боксы, генерируемые элементом. Невидимые боксы всё ещё влияют на структуру (см. свойство 'display' - 'none', чтобы полностью подавить генерацию бокса).
Значения имеют следующий смысл:

visible
Генерируемый бокс виден.
hidden
Генерируемый бокс невидим (полностью прозрачен), но влияет на структуру.
collapse
См. также раздел динамические эффекты рядов и столбцов в таблицах. Если используется не с рядами или столбцами, 'collapse' имеет то же значение, что и 'hidden'.

Это свойство может использоваться вместе со скриптами для создания динамических эффектов.

В следующем примере нажатие любой кнопки в форме вызывает функцию скрипта, которая делает соответствующий бокс видимым, а другой скрывается. Поскольку эти боксы имеют одинаковые размеры и позицию, эффект заключается в том, что они сменяют друг друга. (Сценарий написан на гипотетическом языке сценариев. Он может иметь или не иметь какого-либо эффекта в ПА CSS.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
   #container1 { position: absolute;
                 top: 2in; left: 2in; width: 2in }
   #container2 { position: absolute;
                 top: 2in; left: 2in; width: 2in;
                 visibility: hidden; }
-->
</STYLE>
</HEAD>
<BODY>
<P>Choose a suspect:</P>
<DIV id="container1">
   <IMG alt="Al Capone"
        width="100" height="100"
        src="suspect1.jpg">
   <P>Name: Al Capone</P>
   <P>Residence: Chicago</P>
</DIV>

<DIV id="container2">
   <IMG alt="Lucky Luciano"
        width="100" height="100"
        src="suspect2.jpg">
   <P>Name: Lucky Luciano</P>
   <P>Residence: New York</P>
</DIV>

<FORM method="post"
      action="http://www.suspect.org/process-bums">
   <P>
   <INPUT name="Capone" type="button"
          value="Capone"
          onclick='show("container1");hide("container2")'>
   <INPUT name="Luciano" type="button"
          value="Luciano"
          onclick='show("container2");hide("container1")'>
</FORM>
</BODY>
</HTML>


Модель визуального форматирования

9 Модель визуального форматирования

Содержание

  • 9.1 Введение
    • 9.1.1 Порт просмотра
    • 9.1.2 Содержащие блоки
  • 9.2 Управление генерацией боксов
    • 9.2.1 Элементы уровня блока и боксы блока
      • Анонимные боксы блока
    • 9.2.2 Инлайн-элементы и инлайн-боксы
      • Анонимные инлайн-боксы
    • 9.2.3 Боксы compact
    • 9.2.4 Втягивающиеся боксы
    • 9.2.5 Свойство 'display'
  • 9.3 Схемы позиционирования
    • 9.3.1 Выбор схемы позиционирования: свойство 'position'
    • 9.3.2 Позиционирование и заполнение в боксе: 'top', 'right', 'bottom', 'left'
  • 9.4 Нормальное расположение
    • 9.4.1 Контекст форматирования блока
    • 9.4.2 Контекст форматирования инлайн
    • 9.4.3 Относительное позиционирование
  • 9.5 Поплавки
    • 9.5.1 Позиционирование поплавка: свойство 'float'
    • 9.5.2 Управление расположением после поплавка: свойство 'clear'
  • 9.6 Абсолютное позиционирование
    • 9.6.1 Фиксированное позиционирование
  • 9.7 Соотношение между 'display', 'position' и 'float'
  • 9.8 Сравнение нормального расположения, поплавков и абсолютного позиционирования
    • 9.8.1 Нормальное расположение
    • 9.8.2 Относительное позиционирование
    • 9.8.3 Обтекание бокса
    • 9.8.4 Абсолютное позиционирование
  • 9.9 Слои
    • 9.9.1 Спецификация уровня в пакете слоёв: свойство 'z-index'
  • 9.10 Направление текста: свойства 'direction' и 'unicode-bidi'

9.1 Введение

Эта и последующие главы описывают модель визуального форматирования: то как пользовательские агенты (ПА) обрабатывают дерево документа для визуального носителя.

В модели визуального форматирования каждый элемент дерева документа генерирует ноль или более боксов в соответствии с моделью боксов. Структура этих боксов управляется:

  • размерами боксов и типом.
  • схемой позиционирования (нормальное позиционирование, всплывание и абсолютное).
  • взаимоотношениями между элементами в дереве документа.
  • внешней информацией (например, размером порта просмотра, внутренними размерами изображений и т.д.).

Свойства, определённые в этой и следующих главах, применяются и к непрерывным носителям, и к страничным носителям. В то же время, значения свойств полей варьируются при использовании со страничным носителем (см. в страничной модели).

Модель визуального форматирования не определяет все аспекты форматирования (например, она не специфицирует алгоритм расстояний между буквами). Поведение соответствующих ПА может отличаться в вопросах форматирования.

9.1.1 Порт просмотра

ПА для непрерывных носителей обычно предлагают пользователю порт просмотра (окно или другую область просмотра на экране), в котором пользователь видит документ. ПА могут изменять внешний вид документа, если порт просмотра изменил размеры (см. начальный содержащий блок). Если порт просмотра меньше, чем начальный содержащий блок документа, ПА должен предоставить механизм прокрутки. Имеется не менее одного порта просмотра в канве, но ПА могут отображать более чем одну канву (т.е. предоставлять различные виды того же самого документа).

9.1.2 Содержащие блоки

В CSS2 многие варианты позиционирования и размеры вычисляются относительно кромки прямоугольного бокса, называемого содержащий блок. Обычно генерируемые боксы действуют как содержащие блоки для боксов-потомков; мы говорим, что бокс "устанавливает" содержащий блок для своих потомков. Фраза "блок, содержащий бокс" означает "блок, в котором бокс находится", а не блок, генерирующий бокс.

Каждый бокс имеет позицию относительно содержащего блока, но не ограничен этим блоком и может вызвать переполнение.

Корневой элемент дерева документа генерирует бокс, который служит начальным содержащим блоком для последующего вывода.

Ширина начального содержащего блока может быть специфицирована свойством 'width' корневого элемента. Если это свойство имеет значение 'auto', ПА предоставляет начальное значение ширины (например, ПА использует текущую ширину порта просмотра).

Высота начального содержащего блока может быть специфицирована свойством 'height' корневого элемента. Если это свойство имеет значение 'auto', высота содержащего блока увеличивается, чтобы приспособиться к содержимому документа.

Начальный содержащий блок не может быть позиционирован или всплывать (т.е. ПА игнорируют свойства 'position' и 'float' корневого элемента).

Детали того, как высчитываются размеры содержащего блока, описаны в следующей главе.

9.2 Управление генерацией боксов

Последующие разделы описывают типы боксов, которые могут генерироваться в CSS2. Тип бокса воздействует отчасти на его (бокса) поведение в модели визуального форматирования. Свойство 'display', описанное ниже, специфицирует тип бокса.

9.2.1 Элементы уровня блока и боксы блока

Элементы уровня блока это элементы документа-источника, визуально отформатированные как блоки (например, параграфы). Различные значения свойства 'display' создают элемент уровня блока: 'block', 'list-item', 'compact', 'run-in' (не всегда; см. компактные и втягивающиеся боксы) и 'table'.

Элементы уровня блока генерируют основной бокс блока, и только он содержит боксы блоков. Основной бокс блока устанавливает содержащий блок для боксов-потомков и сгенерированного содержимого и является также боксом, участвующим в любой схеме позиционирования. Основные боксы блока действуют в контексте форматирования блока.

Некоторые элементы уровня блока генерируют дополнительные боксы за пределами основного бокса: элементы 'list-item' и элементы с маркёрами. Эти дополнительные боксы размещаются относительно основного бокса.

Анонимные боксы блока

В этом документе:

<DIV>
  Some text
  <P>More text
</DIV>
(и приняв, что и DIV, и P оба имеют 'display: block'), DIV имеет содержимое и инлайн-уровня, и уровня блока. Чтобы легче было определить форматирование, мы примем, что вокруг "Some text" имеется анонимный бокс блока.

diagram showing the three boxes for the example above [D]

На диаграмме изображены три бокса, один из которых анонимный, в примере - верхний.

Другими словами: если бокс блока (такой как сгенерированный в DIV выше) имеет внутри себя другой бокс блока (как P), тогда мы заставляем его иметь боксы блока только внутри себя, перенеся любые инлайн-боксы в анонимный бокс блока.

Пример(ы):

Эта модель будет применена в следующем примере, если данные правила:

/* Примечание: ПАгенты HTML могут не рассматривать эти правила */
BODY { display: inline }
P    { display: block }

будут использованы в данном документе HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HEAD>
<TITLE>Анонимный текст, прерываемый блоком.</TITLE>
</HEAD>
<BODY>
Анонимный текст до P.
<P>Содержимое элемента P.</>
Анонимный текст после P.
</BODY>

Элемент BODY содержит отрывок (C1) анонимного текста, после которого идут элемент уровня блока и второй отрывок анонимного текста (C2). В результате получим анонимный бокс блока для BODY, содержащий анонимный бокс блока вокруг C1, бокс блока P и второй анонимный бокс блока вокруг C2.

Свойства анонимных боксов наследуются из содержащего неанонимного бокса (в примере: из DIV). Ненаследуемые свойства имеют свои начальные значения. Например, шрифт анонимного бокса наследуется из DIV, но поля имеют значения 0.

9.2.2 Инлайн-элементы и инлайн-боксы

Инлайн-элементы это те элементы документа-источника, которые не образуют новых блоков содержимого; содержимое определяется в строке (на месте) (например, выделенные участки текста внутри параграфа, инлайн-изображения и т.п.). Различные значения свойства 'display' делают элемент инлайн: 'inline', 'inline-table', 'compact' и 'run-in' (не всегда; см. компактные и втягивающиеся боксы). Элементы инлайн-уровня (встроенные) генерируют инлайн-боксы.

Инлайн-боксы могут принимать участие в различных контекстах форматирования:

  • Внутри бокса блока инлайн-бокс участвует в инлайн-контексте форматирования.
  • Инлайн-бокс compact расположен в поле бокса блока.
  • Боксы-маркёры имеют позицию также вне бокса блока.

Анонимные инлайн-боксы

В таком документе:

<P>Некоторый <EM>выделенный</em> текст.</P>

элемент P генерирует бокс блока с несколькими инлайн-боксами внутри. Бокс для "выделенный" - это инлайн-бокс, сгенерированный инлайн-элементом (EM), но другие боксы ("Некоторый" и "текст") являются инлайн-боксами, сгенерированными элементом уровня блока (P). Последние называются анонимными инлайн-боксами, поскольку они не имеют ассоциированного инлайн-элемента.

Такие анонимные инлайн-боксы наследуют наследуемые свойства своего родительского бокса уровня блока. Ненаследуемые свойства получают свои начальные значения. В примере - цвет анонимных начальных боксов наследуется из P, но фон остаётся прозрачным.

Если из контекста ясно, какой тип анонимных боксов подразумевается, то и боксы инлайн, и боксы уровня блока называются в данной спецификации анонимными боксами.

Имеются и другие типы анонимных боксов, возникающие при форматировании таблиц.

9.2.3 Боксы compact/компактные

Бокс compact ведёт себя так:

  • Если бокс блока (не поплавок и не позиционированный абсолютно) следует после бокса compact, то compact-бокс форматируется как однострочный инлайн-бокс. Ширина результирующего бокса сравнивается с одним из полей бокса блока. Выбор левого или правого поля определяется в 'direction' , специфицируемом для элемента, производящего содержащий блок для compact-бокса и следующего бокса. Если ширина инлайн-бокса меньше, чем/равна ширине поля, то инлайн-бокс позиционируется в поле, как описано далее.
  • В ином случае compact-бокс становится боксом блока.

Compact-бокс позиционируется в поле следующим образом: он находится вне (слева или справа от) первого строчного бокса блока, но влияет на расчёт высоты строчного бокса. Свойство 'vertical-align' compact-бокса определяет вертикальную позицию compact-бокса относительно строчного бокса. Позиция compact-бокса по горизонтали - всегда в поле бокса блока.

Элемент, который не может быть отформатирован в пределах одной строчки, не может размещаться в поле последующего блока. Например, элемент 'compact' в HTML, который содержит элемент BR, всегда будет форматироваться как бокс блока (принимая для BR стиль по умолчанию, когда вставляется новая строка). Для размещения многострочного текста в поле часто больше подойдёт свойство 'float'.

Следующий пример иллюстрирует compact-бокс:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>A compact box example</TITLE>
    <STYLE type="text/css">
      DT { display: compact }
      DD { margin-left: 4em }
    </STYLE>
  </HEAD>
  <BODY>
    <DL>
      <DT>Short
        <DD><P>Description goes here.
      <DT>too long for the margin
        <DD><P>Description goes here.
    </DL>
  </BODY>
</HTML>

Этот пример может выглядеть после форматирования так:

short    Description goes here

too long for the margin
         Description goes here

Свойство 'text-align' можно использовать для выравнивания compact-элемента внутри поля: у левого края поля ('left'), у правого края поля ('right') или по центру поля ('center'). Значение 'justify' не применяется и обрабатывается или как 'left', или как 'right', в зависимости от 'direction' /направления элемента блока, в поле которого форматируется compact-элемент ('left', если направление - 'ltr', 'right', если направление 'rtl').

Информацию о том, как compact-боксы взаимодействуют с генерируемым содержимым, см. в разделе генерируемое содержимое.

9.2.4 Втягивающиеся боксы (run-in)

Бокс run-in ведёт себя так:

  • Если бокс блока (не поплавок и не позиционированный абсолютно) следует за боксом run-in, то бокс run-in становится первым инлайн-боксом в боксе блока.
  • Иначе бокс run-in становится боксом блока.

Бокс 'run-in' используется для run-in-заголовков, как в этом примере:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Пример бокса run-in</TITLE>
    <STYLE type="text/css">
      H3 { display: run-in }
    </STYLE>
  </HEAD>
  <BODY>
    <H3>Заголовок run-in.</H3>
    <P>И параграф текста,
       следующий за ним.
  </BODY>
</HTML>

Этот пример может форматироваться так:

  Заголовок run-in. И
  параграф текста,
  следующий за ним.

Свойства run-in-элемента наследуются от родителя в дереве-источнике, а не от бокса блока, частью которого он визуально является.

Информацию о том, как compact-боксы взаимодействуют с генерируемым содержимым, см. в разделе Генерируемое содержимое.

9.2.5 Свойство 'display'

'display'
Значение:inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
Начальное:inline
Применяется: все элементы
Наследуется:нет
Процентное:N/A
Носитель:все

Значения этого свойства имеют следующий смысл:

block
Элемент генерирует основной бокс блока.
inline
Элемент генерирует один или более инлайн-боксов.
list-item
Элемент (например, LI в HTML) генерирует основной бокс блока и инлайн-бокс элемента списка. О списках и примерах форматирования списков см. раздел списки.
marker
Объявляет генерируемое содержимое до или после бокса-маркёра. Это значение должно использоваться только вместе с псевдоэлементами :before и :after, присоединёнными к элементам уровня блока. В других случаях это значение интерпретируется как 'inline'. См. также раздел Маркёры.
none
Элемент не генерирует боксы в структуре форматирования (т.е. элемент не влияет на вид документа). Элементы-потомки не генерируют никаких боксов; это поведение не может быть переопределено установкой у потомков свойства 'display'.

Обратите внимание, что отображение 'none' не создаёт невидимый бокс; боксы вообще не создаются. CSS содержит механизмы, делающие возможным генерацию элементом бокса в структуре форматирования, который влияет на структуру форматирования, но невидим. См. детали в разделе Видимость.

run-in и compact
Эти значения создают боксы блока и инлайн, в зависимости от контекста. Свойства, применяемые к боксам run-in и compact, базируются на окончательном статусе боксов (уровень инлайн или блока). Например, свойство 'white-space' применяется только тогда, когда бокс получает уровень блока.
table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell и table-caption
При установке этих значений, элемент ведёт себя как элемент таблицы (ограничения описаны в главе Таблицы).

Заметьте, что, хотя начальное значение 'display' - 'inline', правила в таблицах по умолчанию в ПА могут переопределить это значение. См. пример таблицы стилей для HTML 4.0 в приложении.

Пример(ы):

Несколько примеров свойства 'display':

P   { display: block }
EM  { display: inline }
LI  { display: list-item }
IMG { display: none }      /* Не выводить изображения */

Соответствующие ПА HTML могут игнорировать свойство 'display'.

9.3 Схемы позиционирования

В CSS2 бокс может находиться в разных слоях в соответствии со схемами позиционирования:

  1. Normal flow/Нормальное расположение. В CSS2 нормальное расположение включает форматирование блока для боксов блока, инлайн-форматирование для инлайн-боксов, относительное позиционирование боксов блока или инлайн и позиционирование compact и run-in боксов.
  2. Floats/Поплавки. В модели поплавка бокс сначала накладывается в соответствии с нормальным расположением, затем изымается из расположения и сдвигается влево или вправо, насколько возможно. Содержимое может обтекать по стороне "всплывания" поплавка.
  3. Абсолютное позиционирование. В модели абсолютного позиционирования бокс удаляется из нормального расположения полностью (это не действует на последующие родственные элементы) и получает позиционирование относительно содержащего блока.
Примечание. Схемы позиционирования CSS2 помогают авторам сделать документы более доступными, позволяя избегать трюков разметки (например, невидимых изображений), используемых для создания эффектов отображения.

9.3.1 Выбор схемы позиционирования: свойство 'position'

Свойства 'position' и 'float' определяют, какой из алгоритмов позиционирования CSS2 используется для расчёта позиции бокса.

'position'
Значение:static | relative | absolute | fixed | inherit
Начальное:static
Применяется: ко всем элементам, но не к генерируемому содержимому
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Значения имеют следующий смысл:

static
Бокс является нормальным боксом, расположенным в соответствии с нормальным расположением. Свойства 'left' и 'top' не применяются.
relative
Позиция бокса высчитывается в соответствии с нормальным расположением. Затем бокс смещается относительно нормального расположения. Если бокс В позиционирован относительно, расположение последующего бокса вычисляется так, как если бы бокс В не имел смещения.
absolute
Позиция бокса (и возможные размеры) определяется свойствами 'left', 'right', 'top' и 'bottom'. Эти свойства устанавливают смещение относительно бокса содержащего блока. Абсолютно позиционированные боксы изымаются из нормального обтекания. Это значит, что они не влияют на вывод последующих родственных элементов. Также, хотя абсолютно позиционированные боксы имеют поля, они не соединяются с другими полями.
fixed
Позиция бокса вычисляется в соответствии с моделью 'absolute', но, в дополнение к этому, бокс фиксируется в соответствии с некоторой ссылкой. В случае с непрерывными носителями, бокс фиксируется относительно порта просмотра (и не перемещается при прокрутке). В случае со страничными носителям, бокс фиксируется относительно страницы, даже если страница просматривается через порт просмотра (в случае просмотра перед печатью, например). Авторам может понадобиться специфицировать 'fixed' способом, не зависящим от носителя. Например, автор может захотеть, чтобы бокс оставался в верхней части порта просмотра экрана, но не вверху каждой печатаемой страницы. Две такие спецификации можно разделить, используя правило @media, как здесь:

Пример(ы):

@media screen {
  H1#first { position: fixed }
}
@media print {
  H1#first { position: static }
}

9.3.2 Позиционирование и заполнение в боксе: 'top', 'right', 'bottom', 'left'

Элемент называется позиционированным, если его свойство 'position' имеет значение, отличное от 'static'. Позиционированные элементы генерируют позиционированные боксы, располагающиеся в соответствии с четырьмя свойствами:

'top'
Значение:<length> | <percentage> | auto | inherit
Начальное:auto
Применяется: к позиционируемым элементам
Наследуется:нет
Процентное:относительно высоты содержащего блока
Носитель:визуальный

Это свойство специфицирует, насколько смещён вниз верхний край содержимого бокса относительно верхнего края содержащего блока.

'right'
Значение:<length> | <percentage> | auto | inherit
Начальное:auto
Применяется: к позиционируемым элементам
Наследуется:нет
Процентное:относительно ширины содержащего блока
Носитель:визуальный

Это свойство специфицирует, насколько смещён влево правый край содержимого бокса относительно правого края содержащего блока.

'bottom'
Значение:<length> | <percentage> | auto | inherit
Начальное:auto
Применяется: к позиционируемым элементам
Наследуется:нет
Процентное:относительно высоты содержащего блока
Носитель:визуальный

Это свойство специфицирует, насколько смещён вверх нижний край содержимого бокса относительно низа содержащего блока.

'left'
Значение:<length> | <percentage> | auto | inherit
Начальное:auto
Применяется: к позиционируемым элементам
Наследуется:нет
Процентное:относительно ширины содержащего блока
Носитель:визуальный

Это свойство специфицирует, насколько смещён вправо левый край содержимого бокса относительно левого края содержащего блока.

Значения для этих четырёх свойств имеют следующий смысл:

<length>
Смещением является расстояние от соответствующего края.
<percentage>
Смещением является процент ширины содержащего блока (для 'left' или 'right') или высоты содержащего блока (для 'top' и 'bottom'). Для 'top' и 'bottom', если высота содержащего блока не специфицирована явно (т.е. зависит от высоты содержимого), процентное значение интерпретируется так же, как 'auto'.
auto
Действие этого значения зависит от того, какое из соответствующих свойств также имеет значение 'auto'. См. также разделы ширина и высота абсолютно позиционируемых, незамещаемых элементов.

Для абсолютно позиционируемых боксов - смещения являются относительными к содержащему блоку бокса. Для относительно позиционируемых боксов - смещения являются относительными к внешним краям самого бокса (т.е. боксу задаётся нормальное расположение, а затем - смещение от этой позиции в соответствии с вышеуказанными свойствами).

9.4 Нормальное расположение

Боксы при нормальном обтекании относятся к контексту форматирования, который может быть уровня блока и инлайн, но не тем и другим одновременно. Боксы блока находятся в контексте форматирования блока. Инлайн-боксы находятся в контексте инлайн-форматирования.

9.4.1 Контекст форматирования блока

В контексте форматирования блока боксы устанавливаются один за другим, вертикально, начиная от верха содержащего блока. Вертикальное расстояние между двумя родственными боксами определяется свойством 'margin'. Горизонтальные поля между смежными боксами блока в контексте форматирования блока сжимаются.

В контексте форматирования блока левый внешний край бокса касается левого края содержащего блока (для форматирования справа-налево - касается правый край). Это верно даже в случае с поплавками (хотя область содержимого может усекаться из-за поплавков).

Информацию о разрывах страниц в страничных носителях см. в разделе допустимые разрывы страниц.

9.4.2 Контекст инлайн-форматирования

В контексте инлайн-форматирования боксы устанавливаются по горизонтали, один за другим, начиная от верха содержащего блока. Горизонтальные поля, рамки и заполнение рассматриваются как отношения между боксами. Боксы могут быть выровнены по вертикали несколькими способами: могут быть выровнены их нижние или верхние края или базовые линии текста внутри них. Прямоугольная область, содержащая боксы, которые образуют строку, называется строчный бокс.

Ширина строчного бокса определяется содержащим блоком. Высота строчного бокса определяется правилами из раздела вычисление высоты строки. Строчный бокс всегда имеет высоту, достаточную для содержащихся в нём боксов. В то же время, он может быть выше, чем самый высокий из содержащихся в нём боксов (если, например, боксы выровнены так, что базовые линии выстроены). Если высота бокса В меньше, чем высота строчного бокса, содержащего его, то вертикальное выравнивание В внутри строчного бокса определяется свойством 'vertical-align'.

Если несколько инлайн-боксов не входят по горизонтали в один строчный бокс, они распределяются на два или более вертикально упакованных строчных бокса. Таким образом, параграф будет вертикальным стеком из строчных боксов. Строчные боксы упакованы по вертикали без разделения и никогда не перекрываются.

Вообще, левый край строчного бокса касается левого края его содержащего блока, и правый край касается правого края его содержащего блока. В то же время, боксы-поплавки могут появляться между краем содержащего блока и краем строчного блока. Таким образом, хотя строчные боксы в том же самом контексте инлайн-форматирования обычно имеют ту же самую ширину (что и содержащий блок), они могут иметь и другую ширину из-за поплавков, уменьшающих горизонтальное пространство. Строчные боксы в том же самом контексте инлайн-форматирования обычно различаются по высоте (например, одна строка может содержать высокое изображение, а другие строки - только текст).

Если суммарная ширина инлайн-боксов в строке меньше, чем ширина строчного бокса, содержащего их, то их распределение по горизонтали внутри строчного бокса определяется свойством 'text-align'. Если это свойство имеет значение 'justify', ПА может уплотнить инлайн-боксы.

Поскольку инлайн-бокс не может превысить ширину строчного бокса, длинные инлайн-боксы разделяются на несколько боксов, и эти боксы распределяются на несколько строчных боксов. Если инлайн-бокс разделён, то поля, рамки и заполнение не имеют визуального эффекта в тех местах, где происходит разделение. Форматирование полей, рамок и заполнения может не быть определено полностью, если разделение происходит внутри двунаправленного внедрения.

Инлайн-боксы могут также быть разделены на несколько боксов внутри одного строчного бокса из-за двунаправленной обработки текста.

Вот пример конструкции инлайн-боксов. Следующий параграф (созданный элементом Р уровня блока в HTML) содержит анонимный текст, распределённый между элементами EM и STRONG:

<P>Several <EM>emphasized words</EM> appear
<STRONG>in this</STRONG> sentence, dear.</P>

Элемент P генерирует бокс блока, содержащий пять инлайн-боксов, три из которых - анонимные:

  • Anonymous: "Several"
  • EM: "emphasized words"
  • Anonymous: "appear"
  • STRONG: "in this"
  • Anonymous: "sentence, dear."

Чтобы сформатировать параграф, ПА вставляет пять боксов в строчный бокс. В этом примере бокс, генерируемый для элемента P, устанавливает содержащий блок для строчных боксов. Если содержащий блок достаточно широк, все инлайн-боксы войдут в один строчный бокс:

Several emphasized words appear in this sentence, dear.

если нет, инлайн-боксы будут разделены и распределены по нескольким строчным боксам. Предыдущий параграф может быть разделён так:

Several emphasized words appear
in this sentence, dear.
или так:
Several emphasized
words appear in this
sentence, dear.

В предыдущем примере бокс EM был разделён на два бокса EM (назовём их "split1" и "split2"). Поля, рамки, заполнение или текстовый орнамент не имеют видимого эффекта после split1 или до split2.

Рассмотри следующий пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Example of inline flow on several lines</TITLE>
    <STYLE type="text/css">
      EM {
        padding: 2px;
        margin: 1em;
        border-width: medium;
        border-style: dashed;
        line-height: 2.4em;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>Several <EM>emphasized words</EM> appear here.</P>
  </BODY>
</HTML>

В зависимости от ширины P, боксы могут распределиться так:

Image illustrating the effect of line breaking on the display of margins, borders, and padding. [D]

  • Поле вставлено до "emphasized" и после "words".
  • Заполнение вставлено до, сверху и снизу от "emphasized" и после, сверху и снизу от "words". Пунктирная рамка отображается с трёх сторон в каждом случае.

9.4.3 Относительное позиционирование

После того, как бокс расположен в соответствии с нормальным расположением, он может быть сдвинут относительно этой позиции. Это называется относительным позиционированием. Смещение бокса (B1) таким способом не окажет воздействия на бокс (B2), следующий за ним: B2 получит такую позицию, как будто B1 не смещён и B2 не перемещается после применения смещения B1. Это предполагает, что относительное позиционирование может вызывать взаимное перекрытие боксов.

Относительно позиционированные боксы сохраняют свои нормальные размеры и прорисовку, включая разрывы строк и заполнение, первоначально зарезервированные за ними. Относительно позиционированный бокс устанавливает новый содержащий блок для нормальной прорисовки дочерних и позиционированных потомков.

Относительно позиционированный бокс генерируется, когда свойство 'position' элемента имеет значение 'relative'. Смещение специфицируется свойствами 'top', 'bottom', 'left' и 'right'.

Динамическое перемещение боксов, позиционированных относительно, может создавать эффекты анимации в среде скриптов (см. также свойство 'visibility'). Относительное позиционирование можно использовать также как общую форму под- и надиндексов, за исключением того, что высота строки не устанавливается автоматически при рассмотрении позиционирования. См. дополнительно описание вычисления высоты строки.

Примеры относительного позиционирования есть в разделе Сравнение нормального позиционирования, поплавков и абсолютного позиционирования.

9.5 Поплавки/Floats

Поплавок это бокс, который "всплывает" (смещается) влево или вправо на текущей строке. Самое интересное в поведении поплавка (или "всплывающего", или "плавающего" бокса) то, что содержимое может обтекать его по сторонам (или это может быть запрещено свойством 'clear'). Содержимое обтекает справа бокс, всплывающий влево, и слева - бокс всплывающий вправо.

Далее следует введение в позиционирование поплавков и обтекание содержимого; точные правила, управляющие поведением поплавков, даны в описании свойства 'float'.

Всплывающий бокс обязан иметь явно установленную ширину (назначенную свойством 'width' , или свою внутреннюю ширину - в случае замещаемых элементов). Любой всплывающий бокс становится боксом блока, который сдвигается влево или вправо, пока его внешний край не коснётся края содержащего блока или внешнего края другого поплавка. Верх всплывающего бокса выравнивается с верхом текущего строчного бокса (или низом предшествующего бокса блока, если отсутствует строчный бокс). Если для поплавка не хватает горизонтального пространства на текущей строке, он сдвигается вниз строка за строкой, пока строка не получит достаточно пространства для него.

Пока поплавок не всплыл, непозиционированные боксы блока, созданные до и после всплывающего бокса, всплывают вертикально, как будто поплавка не существует. Однако строчные боксы, созданные сразу после поплавка, уменьшаются, чтобы дать пространство для всплывающего бокса. Любое содержимое на текущей строке до всплывающего бокса перерисовывается на первой доступной строке с противоположной стороны поплавка.

Несколько поплавков могут быть смежными, и эта модель применяется также к смежным поплавкам на той же строке.

Пример(ы):

Следующее правило вызывает всплывание влево всех боксов IMG с class="icon" (и устанавливает левое поле в '0'):

IMG.icon {
  float: left;
  margin-left: 0;
}

Рассмотрим следующие HTML и таблицу стилей:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Float example</TITLE>
    <STYLE type="text/css">
      IMG { float: left }
      BODY, P, IMG { margin: 2em }
    </STYLE>
  </HEAD>
  <BODY>
    <P><IMG src=img.gif alt="This image will illustrate floats">
       Some sample text that has no other...
  </BODY>
</HTML>

IMG-бокс всплывает влево. Последующее содержимое форматируется справа от поплавка, начиная с той же строки, где находится поплавок. Строчные боксы справа от поплавка укорачиваются из-за присутствия поплавка, но имеют свою "нормальную" ширину (как в содержащем блоке, установленном элементом P) после поплавка. Этот документ может быть сформатирован так:

Image illustrating how floating boxes interact with margins. [D]

Форматирование могло бы быть точно таким же, если бы документ был следующим:

<BODY>
  <P>Some sample text
  <IMG src=img.gif alt="This image will illustrate floats">
           that has no other...
</BODY>

поскольку содержимое слева от поплавка замещается поплавком и обтекает его вниз по его правой стороне.

Поля всплывающих боксов никогда не сжимаются полями смежных боксов. Таким образом, в предыдущем примере вертикальные поля не сжимаются между боксом P и всплывающим IMG-боксом.

Поплавок может перекрывать другие боксы при нормальном позиционировании (например, когда нормально позиционированный бокс, следующий за поплавком, имеет отрицательные поля). Когда инлайн-бокс перекрывается поплавком, содержимое, фон и рамки инлайн-бокса отображаются впереди поплавка. Если блок бокса перекрывается, фон и рамки бокса блока отображаются позади поплавка и видны только там, где бокс прозрачен. Содержимое бокса блока отображается спереди от поплавка.

Пример(ы):

Вот другая иллюстрация, показывающая, что происходит, когда поплавок перекрывает рамки элемента с нормальным всплыванием.

Image showing a floating image that overlaps the borders of two paragraphs: the borders are interrupted by the image. [D]

Всплывающее изображение скрывает рамки перекрываемого бокса блока.

Следующий пример иллюстрирует использование свойства 'clear' для предотвращения всплывания содержимого после поплавка.

Пример(ы):

При таком правиле:

P { clear: left }

форматирование может выглядеть так:

Image showing a floating image and the effect of 'clear: left' on the two paragraphs. [D]

Оба параграфа установлены в 'clear: left', что "выталкивает вниз" второй параграф в положение под поплавком - его верхнее поле растягивается, чтобы выполнить это (см. свойство 'clear').

9.5.1 Позиционирование поплавка: свойство 'float'

'float'
Значение:left | right | none | inherit
Начальное:none
Применяется: ко всему, кроме позиционированных элементов и генерируемого содержимого
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Это свойство специфицирует, должен ли бокс всплывать влево, вправо или не всплывать вообще. Оно может быть установлено для элементов, генерирующих боксы, которые не позиционированы абсолютно.
Значения этого свойства имеют следующий смысл:

left
Элемент генерирует бокс блока, всплывающий влево. Содержимое обтекает по правой стороне бокса, начиная от верха (субъект свойства 'clear'). 'display' игнорируется, если только оно не имеет значения 'none'.
right
То же, что 'left', но содержимое обтекает по левой стороне бокса, начиная от верха.
none
Бокс не всплывает.

Вот точные правила, управляющие поведением поплавка:

  1. Левый внешний край всплывающего влево бокса не может быть слева от левого края его содержащего блока. Аналогичное правило действует для элементов, всплывающих вправо.
  2. Если текущий бокс всплывает влево и имеются другие всплывающие влево боксы, сгенерированные элементами в документе-источнике ранее, тогда для каждого такого предшествующего бокса или левый внешний край текущего бокса обязан быть справа от правого внешнего края предшествующего бокса, или его верх обязан быть ниже, чем низ предшествующего бокса. Аналогичное правило действует для боксов, всплывающих вправо.
  3. Правый внешний край всплывающего влево бокса не может быть справа от левого внешнего края какого-либо всплывающего вправо бокса, находящегося справа от него. Аналогичные правила действуют для элементов, всплывающих вправо.
  4. Верхний внешний край всплывающего бокса не может быть выше, чем верх его содержащего блока.
  5. Верхний внешний край всплывающего бокса не может быть выше, чем верхний внешний край любого всплывающего бокса блока, сгенерированного элементом ранее в документе-источнике.
  6. Верхний внешний край всплывающего бокса элемента не может быть выше, чем верх любого строчного бокса, содержащего бокс, сгенерированный элементом ранее в документе-источнике.
  7. Всплывающий влево бокс, имеющий слева от себя другой всплывающий влево бокс, не может иметь свой правый внешний край справа от правого края своего содержащего блока. (Говоря шире: левый поплавок не может находиться у правого края, если только он уже не находится слева так далеко, насколько это возможно.) Аналогичное правило действует для элементов, всплывающих вправо.
  8. Всплывающий бокс должен быть размещён так высоко, насколько это возможно.
  9. Всплывающий влево бокс обязан быть размещён так далеко влево, насколько это возможно, а всплывающий вправо бокс обязан быть размещён так далеко вправо, насколько это возможно. Более высока позиция имеет преимущество перед позицией, идущей далее влево/вправо.

9.5.2 Управление положением после поплавка: свойство 'clear'

'clear'
Значение:none | left | right | both | inherit
Начальное:none
Применяется: к элементам уровня блока
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Это свойство указывает, какие стороны бокса(ов) элемента не могут быть смежными с ранее всплывшим боксом. (Может быть такое, что элемент сам имеет всплывающих потомков; свойство 'clear' не оказывает на них воздействия.)

Это свойство может быть специфицировано только для элементов уровня блока (включая поплавки). Для компактных и втягивающихся боксов это свойство применяется к окончательному боксу блока, к которому компактный или втягивающийся бокс принадлежит.

Значения имеют следующий смысл при применении к невсплывающим боксам блока:

left
Верхнее поле генерируемого бокса увеличивается настолько, чтобы верхний край рамки был ниже нижнего внешнего края любого всплывающего влево бокса, являющегося результатом действия предыдущих элементов в документе-источнике.
right
Верхнее поле генерируемого бокса увеличивается настолько, чтобы верхний край рамки был ниже нижнего внешнего края любого всплывающего вправо бокса, являющегося результатом действия предыдущих элементов в документе-источнике.
both
Генерируемый бокс перемещается ниже всех всплывающих боксов элементов, появившихся ранее в документе-источнике.
none
Нет ограничений на позицию бокса относительно поплавков.

Если свойство установлено на всплывающие элементы, результатом будет модификация правил позиционирования поплавка. Прибавляется дополнительное условие (#10):

  • Верхний внешний край поплавка обязан быть ниже нижнего внешнего края всех ранее всплывающих влево боксов (если 'clear: left'), или всех ранее всплывающих вправо боксов (если 'clear: right'), или обоих ('clear: both').

9.6 Абсолютное позиционирование

В модели абсолютного позиционирования бокс смещается явно относительно своего содержащего блока. Он полностью удаляется из нормального позиционирования (не влияет на последующих родственников). Абсолютно позиционированный бокс устанавливает новый содержащий блок для нормально позиционируемых дочерних боксов и позиционируемых потомков. В то же время, содержимое абсолютно позиционированных элементов не всплывает вокруг других боксов. Эти элементы могут или могут не закрывать собой содержимое другого бокса, в зависимости от уровней в стэке у перекрываемых боксов.

Ссылки в данной спецификации на абсолютно позиционированный элемент (или его бокс) подразумевают, что свойство 'position' элемента имеет значение 'absolute' или 'fixed'.

9.6.1 Фиксированное позиционирование

Фиксированное позиционирование это подкатегория абсолютного позиционирования. Единственное отличие в том, что для фиксированно позиционированного бокса содержащий блок устанавливается портом просмотра.
Для непрерывных носителей фиксированные боксы не перемещаются при прокрутке документа. В этом смысле они похожи на фиксированные фоновые изображения.
Для страничных носителей боксы с фиксированной позицией повторяются на каждой странице. Это используется для размещения, к примеру, подписи внизу каждой страницы.

Авторы могут использовать фиксированное позиционирование для создания фрэймоподобных презентаций. Рассмотрим следующую структуру фрэймов:

Image illustrating a frame-like layout with position='fixed'. [D]

Этого можно добиться с помощью такого документа HTML и таблицы стилей:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Документ с фрэймами в CSS2</TITLE>
    <STYLE type="text/css">
      BODY { height: 8.5in } /* Необходим далее для процентной высоты */
      #header {
        position: fixed;
        width: 100%;
        height: 15%;
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
      }
      #sidebar {
        position: fixed;
        width: 10em;
        height: auto;
        top: 15%;
        right: auto;
        bottom: 100px;
        left: 0;
      }
      #main {
        position: fixed;
        width: auto;
        height: auto;
        top: 15%;
        right: 0;
        bottom: 100px;
        left: 10em;
      }
      #footer {
        position: fixed;
        width: 100%;
        height: 100px;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <DIV id="header"> ...  </DIV>
    <DIV id="sidebar"> ...  </DIV>
    <DIV id="main"> ...  </DIV>
    <DIV id="footer"> ...  </DIV>
  </BODY>
</HTML>

9.7 Соотношение между 'display', 'position' и 'float'

Три свойства, влияющие на генерацию и структуру бокса -- 'display', 'position' и 'float' -- взаимодействуют так:

  1. Если 'display' имеет значение 'none', ПА обязаны игнорировать 'position' и 'float'. В этом случае элемент не генерирует бокса.
  2. Иначе, если 'position' имеет значение 'absolute' или 'fixed', 'display' установлен в 'block', а 'float' установлен в 'none'. Позиция бокса будет определяться свойствами 'top', 'right', 'bottom' и 'left' и содержащим блоком бокса.
  3. Иначе, если 'float' имеет значение не 'none', 'display' установлен в 'block', и бокс всплывает.
  4. Иначе, оставшиеся свойства 'display' применяются так, как специфицированы.

Примечание. CSS2 не специфицирует поведение структуры, если значения этих свойств изменяются скриптами. Например, что произойдёт, если элемент, имеющий 'width: auto' изменит позицию? Будет ли перерисовано содержимое или форматирование останется первоначальным? Ответ находится за пределами данного документа, и похоже, что такое поведение отличалось для ранних реализаций CSS2.

9.8 Сравнение нормального расположения, поплавков и абсолютного позиционирования

Чтобы проиллюстрировать разницу между нормальным и относительным позиционированием, поплавками и абсолютным позиционированием, мы предлагаем серию примеров на базе следующего фрагмента HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Сравнение схем позиционирования</TITLE>
  </HEAD>
  <BODY>
    <P>Beginning of body contents.
      <SPAN id="outer"> Start of outer contents.
      <SPAN id="inner"> Inner contents.</SPAN>
      End of outer contents.</SPAN>
      End of body contents.
    </P>
  </BODY>
</HTML>

Для этого документа мы принимаем следующие правила:

BODY { display: block; line-height: 200%;
       width: 400px; height: 400px }
P    { display: block }
SPAN { display: inline }

Окончательные позиции боксов, генерируемых внешними и внутренними элементами, различны в каждом примере. В каждой иллюстрации числа слева от иллюстрации обозначают позицию нормального позиционирования строк. (Примечание: иллюстрации используют различные горизонтальные и вертикальные масштабы.)

9.8.1 Нормальное расположение

Рассмотрим следующие объявления CSS для outer и inner, которые не изменяют нормального расположения боксов:

#outer { color: red }
#inner { color: blue }

Элемент P содержит всё инлайн-содержимое: анонимный инлайн-текст и два элемента SPAN. Следовательно, всё содержимое будет расположено вне инлайн-контекста форматирования внутри содержащего блока, устанавливаемого элементом P, и получится что-то подобное:

Image illustrating the normal flow of text between parent and sibling boxes. [D]

9.8.2 Относительное позиционирование

Чтобы увидеть действие относительного позиционирования, мы специфицируем:

#outer { position: relative; top: -12px; color: red }
#inner { position: relative; top: 12px; color: blue }

Текст расположен нормально до элемента outer. Текст outer затем всплывает в своей нормальной позиции и размерах в конце строки 1. Затем инлайн-боксы, содержащие текст (распределённый на три строки), сдвигаются вместе на '-12px' (вверх).

Содержание inner как дочернего от outer было бы нормально расположено сразу после слов "of outer contents" (на строке 1.5). Однако содержимое inner само смещено относительно содержимого outer на '12px' (вниз), обратно на свою первоначальную позицию на строке 2.

Обратите внимание, что на содержимое, следующее после outer, относительное позиционирование outer не влияет.

Image illustrating the effects of relative positioning on a box's content. [D]

Заметьте также, что, имея смещение для outer '-24px', текст outer и текст тела могут быть перекрыты.

9.8.3 Обтекание бокса

Теперь рассмотрим эффект от всплывания текста элемента inner вправо при использовании следующих правил:

#outer { color: red }
#inner { float: right; width: 130px; color: blue }

Текст нормально расположен до бокса inner, который вытолкнут из расположения и всплыл к правому полю (его 'width' установлено явно). Строчные боксы слева от поплавка укорочены, и оставшийся текст документа всплывает в них.

Image illustrating the effects of floating a box. [D]

Чтобы увидеть действие свойства 'clear', мы добавим в пример родственные элементы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Сравнение схем позиционирования II</TITLE>
  </HEAD>
  <BODY>
    <P>Beginning of body contents.
      <SPAN id=outer> Start of outer contents.
      <SPAN id=inner> Inner contents.</SPAN>
      <SPAN id=sibling> Sibling contents.</SPAN>
      End of outer contents.</SPAN>
      End of body contents.
    </P>
  </BODY>
</HTML>

Следующие правила:

#inner { float: right; width: 130px; color: blue }
#sibling { color: red }

заставляют бокс inner всплывать вправо, как и раньше, а остальной текст документа - всплывать в незанятом пространстве:

Image illustrating the effects of floating a box without setting the clear property to control the flow of text around the box. [D]

Однако, если свойство 'clear' родственного элемента установлено в 'right' (т.е. генерируемый родственный бокс не займёт позицию справа от всплывающего бокса), родственное содержимое начнёт располагаться ниже поплавка:

#inner { float: right; width: 130px; color: blue }
#sibling { clear: right; color: red }

Image illustrating the effects of floating an element with setting the clear property to control the flow of text around the element. [D]

9.8.4 Абсолютное позиционирование

Наконец, мы рассмотрим действие абсолютного позиционирования. Вот объявления CSS для outer и inner:

#outer {
    position: absolute;
    top: 200px; left: 200px;
    width: 200px;
    color: red;
}
#inner { color: blue }

которые позиционируют верх бокса outer относительно его содержащего блока. Содержащий блок для позиционируемого бокса устанавливается ближайшим позиционированным предком (или, если таковой не существует, начальным содержащим блоком, как в нашем примере). Верхняя сторона бокса outer на '200px' ниже верха содержащего блока, а левая сторона - на '200px' от левой стороны. Дочерний бокс outer'а позиционирован нормально относительно родителя.

Image illustrating the effects of absolutely positioning a box. [D]

Следующий пример покажет абсолютно позиционированный бокс, являющийся дочерним от относительно позиционированного бокса. Хотя родительский бокс outer не имеет смещения, установка его свойства 'position' в 'relative' означает, что этот бокс может служить как содержащий блок для позиционированных потомков. Поскольку бокс outer это инлайн-бокс, разделённый на несколько строк, край верха первого инлайн-бокса и левый край (обозначенный толстой пунктирной линией на рисунке ниже) служат как ссылки для смещений 'top' и 'left'.

#outer {
  position: relative;
  color: red
}
#inner {
  position: absolute;
  top: 200px; left: -100px;
  height: 130px; width: 130px;
  color: blue;
}

В результате получится примерно так:

Image illustrating the effects of absolutely positioning a box with respect to a containing block. [D]

Если мы не позиционируем бокс outer:

#outer { color: red }
#inner {
  position: absolute;
  top: 200px; left: -100px;
  height: 130px; width: 130px;
  color: blue;
}

содержащий блок для inner станет начальным содержащим блоком (в нашем примере). Следующая иллюстрация показывает, где в этом случае окажется бокс inner.

Image illustrating the effects of absolutely positioning a box with respect to a containing block established by a normally positioned parent. [D]

Относительное и абсолютное позиционирование может использоваться для выполнения смены баннеров, как показано в следующем примере. Такой документ:

<P style="position: relative; margin-right: 10px; left: 10px;">
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
<SPAN style="position: absolute; top: auto; left: -1em; color: red;">--</SPAN>
word.</P>

может дать в результате примерно это:

Image illustrating the use of floats to create a changebar effect. [D]

Сначала параграф (стороны содержащего блока которого показаны на иллюстрации) расположен нормально. Затем он смещается на '10px' от левого края содержащего блока (таким образом, правое поле в '10px' резервируется для предполагаемого смещения). Два дефиса, работающие как сменяющиеся баннеры, изымаются из расположения и позиционируются на текущей строке (поскольку 'top: auto'), на '-1em' от левого края своего содержащего блока (установленного P в свою окончательную позицию). В результате сменяющиеся баннеры "всплывают" слева от текущей строки.

9.9 Слои

В последующих разделах выражение "спереди от" означает ближе к пользователю, смотрящему на экран.

В CSS2 каждый бокс имеет позицию в трёх измерениях. В дополнение к позиции относительно вертикали и горизонтали, боксы расположены вдоль "z-axis/оси z" и форматируются один над другим. Позиции по оси z обычно рассматриваются, когда боксы перекрываются визуально. В этом разделе обсуждается, как боксы можно позиционировать относительно оси z.

Каждый бокс принадлежит к контексту стэка. Каждый бокс в данном контексте стэка имеет целочисленный уровень стэка, являющийся позицией бокса по оси z относительно других боксов того же самого контекста стэка. Боксы с большим уровнем стэка всегда форматируются перед боксами с меньшим уровнями стэка. Боксы могут иметь отрицательные значения уровня стэка. Боксы, имеющие тот же уровень в контексте стэка, упакованы снизу-вверх в соответствии с порядком дерева документа.

Корневой элемент создаёт корневой контекст стэка, но другие элементы могут устанавливать локальные контексты стэка. Контексты стэка наследуются. Локальный контекст стэка первичен; боксы других контекстов стэка не могут появляться между его боксами.

Элемент, устанавливающий локальный контекст стэка, генерирует бокс, который имеет два уровня стэка: один для контекста создаваемого стэка (всегда '0') и второй для контекста стэка, к которому он (бокс) принадлежит (задаваемый свойством 'z-index').

Бокс элемента имеет тот же уровень стэка, что и его бокс-родитель, если только не задан другой уровень стэка свойством 'z-index'.

9.9.1 Спецификация уровня в пакете слоёв: свойство 'z-index'

'z-index'
Значение:auto | <integer> | inherit
Начальное:auto
Применяется: к позиционированным элементам
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Для позиционированных боксов свойство 'z-index' специфицирует:

  1. Уровень стэка бокса в текущем контексте стэка.
  2. Устанавливает ли бокс локальный контекст стэка.

Значения имеют следующий смысл:

<integer>
Это целое число - уровень стэка сгенерированного бокса в текущем контексте стэка. Бокс также устанавливает локальный контекст стэка со своим уровнем в стэке '0'.
auto
Уровень стэка сгенерированного бокса в текущем контексте стэка тот же, что и у бокса-родителя. Бокс не устанавливает новый локальный контекст стэка.

В следующем примере уровни стэка боксов (именованных своими атрибутами "id"): "text2"=0, "image"=1, "text3"=2 и "text1"=3. Уровень стэка для "text2" наследуется от корневого бокса. Остальные - специфицируются свойством 'z-index'.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Z-позиционирование</TITLE>
    <STYLE type="text/css">
      .pile {
        position: absolute;
        left: 2in;
        top: 2in;
        width: 3in;
        height: 3in;
      }
    </STYLE>
  </HEAD>
  <BODY>
    <P>
      <IMG id="image" class="pile"
           src="butterfly.gif" alt="A butterfly image"
           style="z-index: 1">

    <DIV id="text1" class="pile"
         style="z-index: 3">
      This text will overlay the butterfly image.
    </DIV>

    <DIV id="text2">
      This text will be beneath everything.
    </DIV>

    <DIV id="text3" class="pile"
         style="z-index: 2">
      This text will underlay text1, but overlay the butterfly image
    </DIV>
  </BODY>
</HTML>

Этот пример демонстрирует понятие прозрачности. Поведение по умолчанию бокса - позволять боксам, находящимся сзади, быть видимыми сквозь прозрачные области своего содержимого. В примере каждый бокс прозрачно накладывается на боксы ниже себя. Это поведение может быть переопределено путём использования одного из существующих свойств фона.

9.10 Направление текста: свойства 'direction' и 'unicode-bidi'

Символы в некоторых видах письма записываются справа налево. В некоторых документах, особенно на арабском и еврейском, и в некоторых контекстах смешивания языков текст в одиночном (визуально отображаемом) блоке может появляться со смешанным направлением письма. Этот феномен называется bidirectionality\двунаправленность, или сокращённо - "bidi".

Стандарт Unicode ([UNICODE], раздел 3.11) даёт сложный алгоритм определения направления текста. Этот алгоритм состоит из подразумеваемой части, базирующейся на свойствах символов, а также явной, контролирующей внедрения и переопределения. CSS2 обращается к этому алгоритму для достижения соответствующего двунаправленного отображения. Свойства 'direction' и 'unicode-bidi' позволяют авторам специфицировать, как элементы и атрибуты языка документа отображаются в этот алгоритм.

Если документ содержит символы справа-налево и если ПА отображает эти символы соответствующими глифами (а не произвольно замещающими, такими как знак кавычки, 16-ричный код, чёрный бокс и т.п.), то ПА обязан применять двунаправленный алгоритм. Это кажущееся односторонним требование отражает тот факт, что, хотя не каждый еврейский или арабский документ содержит текст разных направлений, велика вероятность того, что эти документы могут содержать текст слева-направо (например, числа, текст из других языков).

Поскольку направление текста зависит от структуры и семантики документа, эти свойства должны в большинстве случаев использоваться только дизайнерами описания типа документа (ОТД) или авторами специальных документов. Если таблица стилей по умолчанию специфицирует эти свойства, то авторы и пользователи не должны специфицировать правила для их переопределения. Типичным исключением будет переопределение bidi-поведения в ПА, если этот ПА производит транслитерацию идиша (обычно записанного буквами иврита) на латиницу по запросу пользователя.

Спецификация HTML 4.0 ([HTML40], раздел 8.2) определяет двунаправленное поведение для элементов HTML. Соответствующие HTML ПАгенты могут поэтому игнорировать свойства 'direction' и 'unicode-bidi' в авторских и пользовательских таблицах стилей. Правила таблиц стилей, которые необходимо применять для bidi-поведения и которые специфицированы в [HTML40] , даны в примере таблицы стилей. Спецификация HTML 4.0 содержит также дополнительную информацию о вопросах двунаправленности.

'direction'
Значение:ltr | rtl | inherit
Начальное:ltr
Применяется: ко всем элементам, но см. текст
Наследуется:да
Процентное:N/A
Носитель:визуальный

Это свойство специфицирует базовое направление письма блоков и направление внедрений и переопределений (см. 'unicode-bidi') для двунаправленного алгоритма Unicode. Дополнительно оно специфицирует направление для столбца таблицы, направление горизонтального переполнения и позицию неполной последней строки блока в том случае, если 'text-align: justify'.

Значения этого свойства имеют следующий смысл:

ltr
Направление слева направо.
rtl
Справа налево.

Чтобы свойство 'direction' работало в элементах инлайн-уровня, значение свойства 'unicode-bidi' обязано быть 'embed' или 'override'.

Примечание. Свойство 'direction', специфицированное для элементов столбца таблицы, не наследуется ячейками столбца, поскольку столбцы не существуют в дереве документа. Таким образом, CSS не может использовать правила наследования атрибута "dir", описанные в [HTML40], в разделе 11.3.2.1.

'unicode-bidi'
Значение:normal | embed | bidi-override | inherit
Начальное:normal
Применяется: ко всем элементам, но см. текст
Наследуется:нет
Процентное:N/A
Носитель:визуальный

Значения этого свойства имеют следующий смысл:

normal
Элемент не открывает дополнительный уровень внедрения относительно двунаправленного алгоритма. Для элементов инлайн-уровня неявное переупорядочивание работает вне границ элемента.
embed
Если элемент - инлайн-уровня, это значение открывает дополнительный уровень внедрения относительно двунаправленного алгоритма. Направление в этом уровне внедрения задаётся свойством 'direction'. Внутри элемента переупорядочивание выполняется неявно. Это соответствует дополнению LRE (U+202A; для 'direction: ltr') или RLE (U+202B; для 'direction: rtl') в начале элемента и PDF (U+202C) в конце элемента.
bidi-override
Если элемент - уровня блока или инлайн и содержит только элементы инлайн-уровня, это значение создаёт переопределение. Это означает, что внутри элемента переупорядочивание выполняется строго в соответствии со свойством 'direction'; неявная часть двунаправленного алгоритма игнорируется. Это соответствует дополнению LRO (U+202D; для 'direction: ltr') или RLO (U+202E; для 'direction: rtl') в начале элемента и a PDF (U+202C) в конце элемента.

Окончательный порядок символов в каждом элементе уровня блока - такой, как если бы bidi-код управления был добавлен так, как описано выше, разметка была бы вырезана, а результирующая последовательность символов - передана в двунаправленный алгоритм Unicode в обычный текст, который производил бы те же самые разрывы строк, что и стилизованный текст. В этом процессе нетекстуальные объекты, такие как изображения, рассматриваются как нейтральные символы, если только их свойство 'unicode-bidi' не имеет значений, отличных от 'normal', тогда они рассматриваются как полужирные (strong) символы в 'direction' , специфицированном для элемента.

Пожалуйста, обратите внимание, что, для того чтобы иметь возможность разместить инлайн-боксы в одном направлении (все слева-направо или все справа-налево), может понадобиться создание дополнительных инлайн-боксов (включая анонимные инлайн-боксы), и понадобится разделить и переупорядочить некоторые инлайн-боксы до размещения.

Поскольку алгоритм Unicode имеет предел - 15 уровней внедрения, лучше не использовать 'unicode-bidi' со значениями, отличными от 'normal', если отсутствуют подходящие. Значение 'inherit' должно использоваться особенно осторожно. Однако для элементов, которые обычно предполагается отображать как блоки, установка 'unicode-bidi: embed' предпочтительнее для удержания элементов вместе в том случае, когда дисплей изменяется на инлайн (см. пример ниже).

В следующем примере показан документ XML с двунаправленным текстом. Он иллюстрирует важный принцип дизайна: дизайнеры ОТД должны принимать в расчёт bidi и в собственно языке (элементы и атрибуты), и в сопровождающих таблицах стилей. Таблицы стилей должны быть разработаны так, чтобы правила bidi были отделены от других правил стиля. Правила bidi не должны переопределяться другими таблицами стилей, чтобы сохранить поведение bidi языка и ОТД.

Пример(ы):

Здесь буквы нижнего регистра присущи символам слева-направо, а буквы верхнего регистра - символам справа-налево:

<HEBREW>
  <PAR>HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5</PAR>
  <PAR>HEBREW6 <EMPH>HEBREW7</EMPH> HEBREW8</PAR>
</HEBREW>
<ENGLISH>
  <PAR>english9 english10 english11 HEBREW12 HEBREW13</PAR>
  <PAR>english14 english15 english16</PAR>
  <PAR>english17 <HE-QUO>HEBREW18 english19 HEBREW20</HE-QUO></PAR>
</ENGLISH>

Поскольку это - XML, таблица стилей отвечает за направление письма.
Это таблица стилей:

/* Правила для bidi */
HEBREW, HE-QUO  {direction: rtl; unicode-bidi: embed}
ENGLISH         {direction: ltr; unicode-bidi: embed}

/* Правила для представления */
HEBREW, ENGLISH, PAR  {display: block}
EMPH                  {font-weight: bold}

Элемент HEBREW это блок с базовым направлением справа-налево, элемент ENGLISH это блок с базовым направлением слева-направо. PARы - это блоки, наследующие базовое направление от своих родителей. Таким образом, первые два PARа готовы начаться справа сверху, а последние три готовы начаться слева сверху. Обратите внимание, пожалуйста, что HEBREW и ENGLISH выбраны как имена элементов лишь для ясности; обычно имена элементов должны относиться к структуре, без ссылок на языки.

Элемент EMPH - уровня инлайн, и, поскольку его значение для 'unicode-bidi' - 'normal' (начальное значение), он не оказывает воздействия на порядок расположения текста. Элемент HE-QUO, напротив, создаёт внедрение.

Если длина строки достаточно большая, форматирование текста может выглядеть примерно так:

               5WERBEH 4WERBEH english3 2WERBEH 1WERBEH

                                8WERBEH 7WERBEH 6WERBEH

english9 english10 english11 13WERBEH 12WERBEH

english14 english15 english16

english17 20WERBEH english19 18WERBEH

Заметьте, что внедрение HE-QUO заставляет HEBREW18 находиться справа от english19.

Если строки должны быть разбиты, то выглядеть будет примерно так:

       2WERBEH 1WERBEH
  -EH 4WERBEH english3
                 5WERB

   -EH 7WERBEH 6WERBEH
                 8WERB

english9 english10 en-
glish11 12WERBEH
13WERBEH

english14 english15
english16

english17 18WERBEH
20WERBEH english19

Поскольку HEBREW18 обязан быть прочитан до english19, он находится в строке над english19. Простой разрыв строки из предыдущего форматирования не должен сработать.
Заметьте также, что первый слог из english19 может войти на предыдущую строку, но перенос слов слева-направо в контекст справа-налево и наоборот обычно подавляется, чтобы исключить отображение знака переноса в середине строки.